title: Shared data from root instance
body: <p>In my root Vue instance I am defining an <code>isAdmin()</code> method that does an ajax request to an API endpoint and determines if the user is an administrator or not, I put this method there as a lot of child components need to know if the user is an administrator or not.</p>
  
  <p>The issue that I am running in to is that when the component accesses the root element data <code>isAdmin</code> the value is still <code>false</code> (default) and since the property is in the root instance the component does not react to the change. </p>
  
  <p>Which is the best way to tackle what I'm tryin to achieve? I am trying to avoid having each component making it's own API call to the same endpoint.</p>
  
  <p>Root instance:</p>
  
  <pre><code>window.App = new Vue({
    el: '#app',
  
    data: {
      isAdmin: false
    },
  
    created()
    {
      this.checkIfAdmin()
    },
  
    methods: {
      /**
       * Check if the logged in User is an administrator.
       */
      checkIfAdmin()
      {
        axios.get('/api/auth/isAdmin')
             .then(({data}) =&gt; this.isAdmin = data)
      }
    }
  });
  </code></pre>
  
  <p>And then on a children component:</p>
  
  <pre><code>mounted()
  {
    if (this.$root.$data.isAdmin) {
      //Does not fire as `isAdmin` is still false at the time of parsing
      console.log('I am an admin!')
    }
  },
  </code></pre>
  
  <p>Some of my components are not direct child.. ie.. grandchild.</p>