title: this.$refs always empty or undefined in Vue component
body: <p>I am new to Vue and am trying to use $refs to grab some elements in the DOM from a sibling component (for very basic purposes, just to get their heights, etc.), and I'm doing so in a computed.</p>
  
  <p>No matter what I try, <code>this.$root.$refs</code> either always comes back undefined or as an empty object, and I don't know what I'm doing wrong.</p>
  
  <p>In a parent component, I have:</p>
  
  <pre><code>&lt;template&gt;
  &lt;ComponentA /&gt;
  &lt;ComponentB /&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In component A I have:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="user-nav"&gt;
     &lt;div ref="nav-container"&gt;
      &lt;slot /&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I just try to see if I can access this in ComponentB by console logging </p>
  
  <pre><code> console.log(this.$root.$refs);
  </code></pre>
  
  <p>in that component's mounted function.</p>
  
  <p>But I keep getting an empty object.</p>
  
  <p>Can you just not access things across sibling components like this???</p>