VueJS $watch $refs

Question

Is it possible to $watch Vue $refs?

I'm wanting to set logic against a child component that is nested inside my current Vue instance but inside the ready callback, $refs.childcomponent is initially undefined while it's processed.

inside ready()

this.$watch('$refs', function() {
    console.log("not firing");
}, { deep: true });

Result: Error: Maximum call stack exceeded

watch property of the instance

watch: {
  '$refs': {
     handler: function() { console.log("hit"); },
     deep: true
  }
}

result: nothing.

Answer 1

You can $watch $refs.<name>.<data> but not $refs.<name> itself, not to mention $refs.

https://jsfiddle.net/kenberkeley/9pn1uqam/

Answer 2

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

Answer 3

In mounted use code below:

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