title: How to handle (for now) missing data?
body: <p><strong>Summary:</strong> I display some data I get from an API. Due to the asynchronous nature of the calls and to various refresh  rates, I cannot assume that the <code>data</code> in my <code>Vue</code> object will be available when I call it from the HTML code. <strong>Is there a way to handle missing data in Vue.js?</strong></p>
  
  <p><strong>Details:</strong></p>
  
  <p>The following code works (outputs <code>hello world</code>) because <code>message.text</code> is defined during the compilation of the <code>Vue</code> instance:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: '#root',
    data: {
      message: {
        text: "hello"
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;
    &lt;span&gt;{{message.text}}&lt;/span&gt;
    &lt;span&gt;world&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If <code>message</code> is defined via an external action (a call to an API for instance) then the code below will fail:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: '#root',
    data: {
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;
    &lt;span&gt;{{message.text}}&lt;/span&gt;
    &lt;span&gt;world&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The solution I use today is to have placeholders (default values) for the bits of <code>data</code> which will be rendered before I have a chance to update them with real values but this complexifies (and uglifies) my code when <code>data</code> gets complex.</p>
  
  <p>Is there a way to instruct Vue.js to silently fail when reaching for <code>data</code> elements not defined (yet)?</p>