VueJS $watch $refs VueJS $watch $refs vue.js vue.js

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)})


No, $refs are not reactive, watch won't work.


In mounted use code below:

this.$watch(        () => {            return this.$refs.<name>.<data>        },      (val) => {        alert('$watch $refs.<name>.<data>: ' + val)      }    )