title: Can't get access to $root in Vue.js
body: <p>In my application I have a root page. In this root page I include <code>Navbar component</code> from which I try to get access to variable named <code>currentRoute</code>.
  My <code>index.js</code>, where I defined <code>currentRoute</code>:</p>
  
  <pre><code>import Vue from 'vue';
  import routes from './routes';
  
  var app = new Vue({
      el: '#app',
      data: {
          currentRoute: window.location.pathname,
      },
      computed: {
          ViewComponent () {
              return routes[this.currentRoute] || routes.NotFound;
          }
      },
      render (h) {
          return h(this.ViewComponent)
      }
  });
  
  window.addEventListener('popstate', () =&gt; {
      app.currentRoute = window.location.pathname;
  });
  </code></pre>
  
  <p>I have <code>home.vue</code> which is default route and where I included a component named <code>Navbar</code> where I try to get access to <code>currentRoute</code> and which looks like:</p>
  
  <pre><code>&lt;template lang="jade"&gt;
  .navbar
      .row
          .col.text-center
              a.post-outline.navbar--icon(href='/new-post', @click="newPost")
          .col.text-center
              i.email-outline.navbar--icon
          .col.text-center
              i.person-outline.navbar--icon
  &lt;/template&gt;
  
  &lt;script&gt;
  import routes from '../../routes';
  export default {
      props: {
          href: String,
          required: true
      },
      computed: {
          isActive () {
              return this.href === this.$root.currentRoute
          }
      },
      methods: {
          newPost: event =&gt; {
              event.preventDefault();
  
              this.$root.currentRoute = this.href;
  
              window.history.pushState(
                null,
                routes[this.href],
                this.href
              )
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My routes.js:</p>
  
  <pre><code>import NotFound from './pages/404.vue';
  import Home from './pages/home.vue';
  const NewPost = { template: '&lt;p&gt;new post page&lt;/p&gt;' }
  
  export default {
      '/': Home,
      '/new-post': NewPost
  }
  </code></pre>
  
  <p>Everything works fine but <code>this.$root</code> is undefined. Why and where is my mistake?</p>