Vue.Js Computed And Watcher Properties

<html>
    <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
    </head>
    <body>
<div id="app">
 <input type="text" v-model="searchQuery"/>
  {{ searchQuery }}
</div>
<script>
  var vm = new Vue({
  el: '#app',
  data: {
  message:'The Tutorialsplane is the best and largest web development tutorials website',
  ans:true,
  searchQuery:0,
  games: [
      'Clash Royale',
      'Pokeman Go',
      'Dead Trigger 2',
      'Minecraft'
    ],
  },
   methods: {
    reverseTemplate: function () {
      this.message = this.message.split('').reverse().join('')
    }
  },
   watch:{
    searchQuery:function(newValue, oldValue){
       console.log("watch called")
       alert('Counter changed from ' + oldValue + ' to ' + newValue + '!')
  }
  }   
})
</script>
    </body>
</html>