title: Vue.js - error when rendering component
body: <p>The data is on firebase, and I want to show only 1 object with [objectNumber] see  <code>{{ligler[1].name}}</code> in the template, but when I do this it works but I get errors:</p>
  
  <ul>
  <li><strong>Error when rendering component</strong> </li>
  <li><strong>Uncaught TypeError: Cannot read property 'name' of undefined</strong></li>
  </ul>
  
  <p>I think, the problem is that the data loaded before the component.</p>
  
  <p>When I use v-for, it show the name off all objects without errors, but I only want to show one object.</p>
  
  <p>The template looks like:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
    &lt;h1&gt;{{ligler[1].name}}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>the script:</p>
  
  <pre><code>&lt;script&gt;
  import Firebase from 'firebase'
  
  let config = {
      apiKey: "xxxxxxxxxx",
      authDomain: "xxxxxxxxxx",
      databaseURL: "https://xxxxxxxxxx.firebaseio.com"
  }
  
  let app = Firebase.initializeApp(config);
  let db = app.database();
  
  let ligRef = db.ref('ligler');
  
  export default {
    name: 'app',
    firebase: {
      ligler: ligRef
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried to add v-if to the h1, but that doesn't work.</p>
  
  <p>How can I fix this errors?</p>