Triggering VueJs $watch from browser's console not working

Viewed 1077

I have this main.js file that bootstraps my Vue application.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

var model = {
  a: 1,
  name: 'Abdullah'
}

var app = new Vue({
  el: '#app',
  data: model,
  router,
  template: '<App/>',
  components: {
    App
  },
  watch: {
    a: function(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
});

app.a = 23; //This triggers the watch function

Inside my view instance i am watching any changes on data a.

Any change on a should trigger the watch and write to console. This watch works fine when i trigger it by changing the value of a from within the main.js file like so app.a=23; but the same doesn't work when i trigger it from the browsers console.

How can i trigger watch from the browser's console whenever a is changed?

PS: I have just started with VueJS.

1 Answers
Related