Question

How do you access the root instance in VueJS?

Answer 1

The root instance(new Vue()) can be accessed with the $root property.

Let's see the usage of root instance with an example.

First let's create a root instance with properties and methods as below,

// The root Vue instance
new Vue({
  data: {
    age: 26
  },
  computed: {
    fullName: function () { /* ... */ }
  },
  methods: {
    interest: function () { /* ... */ }
  }
})

Now you can access root instance data and it's methods with in subcomponents as below,

// Get root data
this.$root.age

// Set root data
this.$root.age = 29

// Access root computed properties
this.$root.fullName

// Call root methods
this.$root.interest()

It is recommend using Vuex to manage state instead of using root instance as a global store.