Vue.js watcher not executed when manually setting value -

i have vue component:

methods: {   ...   toggletyping: function () {     this.composing = !this.composing;   },   ... }, data: function () {   return {     composing: false,   }; }, watch: {   composing: function (val) {     alert(val);   } } 

when execute toggletyping() watcher not called. i'm new vuejs.

everything showing works. error must lie elsewhere.

new vue({    el:"#app",    methods: {      toggletyping: function() {        this.composing = !this.composing;      },    },    data: function() {      return {        composing: false,      };    },    watch: {      composing: function(val) {        alert(val);      }    }  })

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>  <div id="app">    <button @click="toggletyping()">toggle</button>  </div>