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.