title: Deffering rendering of Vue blocks until data loaded
body: <p>I'm using Vue with Vue router. A common problem is when loading a component which displays some sort of external resource which requires some asynchronous loading.</p>
  
  <p>Say I have a simple Vue component which displays the title of a post loaded from an external repo:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      {{ post.title }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        post: null
      }
    },
  
    route: {
      waitForData: true,
      data () {
        return postRepo.fetch(this.$route.params.id)
        .then(post =&gt; {
          return {post: post}
        })
        .catch(err =&gt; { console.warn(err) })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My route <code>data</code> method returns a promise that when resolved returns the post object that gets inserted into the component's data.</p>
  
  <p>This all works fine and the post title is displayed in the page once the post is loaded but the console throws a warning:</p>
  
  <blockquote>
    <p>[Vue warn]: Error when evaluating expression "post.title": TypeError: Cannot read property 'title' of null</p>
  </blockquote>
  
  <p>The problem is that Vue is trying to render the template before the post has been set. Is there a way to prevent template rendering (which is what I thought <code>waitForData</code> is for) until the <code>route.data()</code> method is resolved?</p>
  
  <p>I know I can use <code>v-if</code> but I'd like to avoid excessive DOM manipulations if possible. </p>