Vuejs synchronously request before render data
<p>I have single page application that requires authentication. When user was authenticated then visit some pages or hit reload button in browser it will request an api that provide their auth data. then I have an error like this:</p>

<p><code>[Vue warn]: Error when evaluating expression "auth.name": TypeError: Cannot read property 'name' of null (found in component: &lt;navbar&gt;)</code></p>

<p>This error is caused because vue render <strong>auth data</strong> while the request to api have not finished yet.</p>

<p>Is possible to make vue wait the request api until finish first, before vue render <strong>auth data</strong>?</p>

<p>just more clearly what going on here. Here is the code:</p>

<pre><code>// main.js
import Vue from 'vue'
import App from './App.vue' // root vue
import store from './vuex/store' // vuex
import router from './router' // my router map

sync(store, router)
router.start(App, '#app')
// end main.js



// App.vue
&lt;template&gt;
  &lt;main&gt;
    &lt;div class="wrapper"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/main&gt;
&lt;/template&gt;

&lt;script&gt;
  import authService from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) =&gt; {
      self.authData = response
    })
  },
  data () {
    return {
      authData: null // default is null until the api finish the process
    }
  }
&lt;/script&gt;
// end App.vue



// SomeRouterComponents.vue
&lt;template&gt;
  &lt;!-- some content --&gt;
  &lt;div&gt;
    // always got error: cannot read property 'name' of null
    // here I expect to render this after api has been resolved
    {{ $root.authData.name }}
  &lt;/div&gt;
  &lt;!-- some content --&gt;
&lt;/template&gt;
</code></pre>