title: Vuejs synchronously request before render data
body: <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>