VueJS $watch $refs
You can $watch
$refs.<name>.<data>
but not $refs.<name>
itself, not to mention $refs
.
https://jsfiddle.net/kenberkeley/9pn1uqam/
const Counter = { data: () => ({ i: 0 }), template: `<fieldset> <p>Counter</p> <code>i = {{ i }}</code> <button @click="i += 1"> Add One </button> </fieldset>`}const App = { components: { Counter }, mounted () { this.$watch( () => { return this.$refs.counter.i }, (val) => { alert('App $watch $refs.counter.i: ' + val) } ) }, template: `<fieldset> <p>App</p> <counter ref="counter" /> </fieldset>`}new Vue({ el: '#app', render: h => h(App)})
In mounted use code below:
this.$watch( () => { return this.$refs.<name>.<data> }, (val) => { alert('$watch $refs.<name>.<data>: ' + val) } )