Can't get access to $root in Vue.js

Question

In my application I have a root page. In this root page I include Navbar component from which I try to get access to variable named currentRoute. My index.js, where I defined currentRoute:

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', () => {
    app.currentRoute = window.location.pathname;
});

I have home.vue which is default route and where I included a component named Navbar where I try to get access to currentRoute and which looks like:

<template lang="jade">
.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
</template>

<script>
import routes from '../../routes';
export default {
    props: {
        href: String,
        required: true
    },
    computed: {
        isActive () {
            return this.href === this.$root.currentRoute
        }
    },
    methods: {
        newPost: event => {
            event.preventDefault();

            this.$root.currentRoute = this.href;

            window.history.pushState(
              null,
              routes[this.href],
              this.href
            )
        },
    },
}
</script>

My routes.js:

import NotFound from './pages/404.vue';
import Home from './pages/home.vue';
const NewPost = { template: '<p>new post page</p>' }

export default {
    '/': Home,
    '/new-post': NewPost
}

Everything works fine but this.$root is undefined. Why and where is my mistake?

Answer 1

Your method newPost() uses the ES6/2015 arrow function syntax (() => {}), which binds this to the parent context. In your case, the parent context is the module and not the Vue instance, so it doesn't have a reference to the $root.

You need to use to either declare the function normally:

newPost: function(event) { }

Or, you can use the ES6/2015 shorthand:

newPost(event) { }

Answer 2

In vue.js, data is passed from parent to children via props. It's passed by reference so if you change it in the child, it would affect the parent state.