title: Vue - Call a method from a different component (uses vue-routes)
body: <p>Here is my base <code>App.vue</code> that holds the <code>router-view</code>:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;Navbar/&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navbar from './components/Navbar.vue';
  
  export default {
      name: 'App',
      components: {
          Navbar
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>In the <code>Navbar.vue</code>, I have a method:</p>
  
  <pre><code>methods: {
      getLoggedStatus(){
          console.log('asdasd')
      }
  }
  </code></pre>
  
  <p>Lastly, I have a <code>Login.vue</code> that is loaded there on the <code>router-view</code>. I wanna acess the <code>getLoggedStatus()</code> from the <code>Navbar.vue</code> within <code>Login.vue</code>. How can I achieve this?</p>
  
  <p>I tried putting a ref to the <code>Navbar</code> tag in <code>App.vue</code>:</p>
  
  <pre><code>&lt;Navbar ref="navvy"/&gt;
  </code></pre>
  
  <p>And calling in on the <code>Login.vue</code> with:</p>
  
  <pre><code>this.$refs.navvy.getLoggedStatus()
  </code></pre>
  
  <p>But it doesn't work.</p>