title: VueJS $watch $refs
body: <p>Is it possible to <code>$watch</code> Vue <code>$refs</code>?</p>
  
  <p>I'm wanting to set logic against a child component that is nested inside my current Vue instance but inside the <code>ready</code> callback, <code>$refs.childcomponent</code> is initially <code>undefined</code> while it's processed.</p>
  
  <p><strong>inside <code>ready()</code></strong></p>
  
  <pre><code>this.$watch('$refs', function() {
      console.log("not firing");
  }, { deep: true });
  </code></pre>
  
  <p>Result: Error: Maximum call stack exceeded</p>
  
  <p><strong><code>watch</code> property of the instance</strong></p>
  
  <pre><code>watch: {
    '$refs': {
       handler: function() { console.log("hit"); },
       deep: true
    }
  }
  </code></pre>
  
  <p>result: nothing.</p>