Introduction
Let's look at a basic plugin setup:
import SomeObject from "./SomeObject";
/**
* Simple Plugin Example...
*/
export default {
install(Vue){
Vue.prototype.$someObject = Vue.observable(SomeObject);
}
}
The goal here is to make an object reactive across the entire application.
Issue and Query
Vue.prototype.$someObject has properties that require global level watching, not just within components.
Is it possible to add a watcher to the Vue instance in the install method of a Vue plugin?
Note: I am seeking a solution other than the one below as it defeats the purpose of plugin separation. Additionally, a global mixin won't suffice...
watch: {
'$someObject.foo': {
handler(value) {
console.log(value);
}
}
}
Attempts so far
Referring to the documentation linked here, I tried these approaches:
export default {
install(Vue){
Vue.prototype.$someObject = Vue.observable(SomeObject);
// Here are the methods I tested:
Vue.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
Vue.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
Vue.prototype.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
Vue.prototype.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
Vue.watch(Vue.$someObject.foo, value => { console.log(value) });
Vue.$watch(Vue.$someObject.foo, value => { console.log(value) });
Vue.prototype.watch(Vue.$someObject.foo, value => { console.log(value) });
Vue.prototype.$watch(Vue.$someObject.foo, value => { console.log(value) });
}
}