title: Access $refs from other components not in the same level as current component
body: <p>I'm working on a Vue application.
  It has a header and then the main content.
  Nesting and structure as below</p>
  
  <pre><code>TheHeader.vue -&gt; TheLogin.vue
  
  MainContent.vue -&gt; ShoppingCart.vue -&gt; OrderSummary.vue
  </code></pre>
  
  <p>I need to access an element in <code>TheLogin.vue</code> from <code>OrderSummary.vue</code></p>
  
  <pre><code>this.$refs.loginPopover.$emit('open')
  </code></pre>
  
  <p>gives me an error <code>"Cannot read property '$emit' of undefined"</code> so obviously I am not able to access <code>$refs</code> from other components.</p>
  
  <p>The question is how do I get hold of refs from other components?
  Thanks in advance!</p>
  
  <p>Edit 1 - Found out $refs works with only child components.
  How do I access elements across components in different level?</p>