title: Can't get Firebase data to display on simple Vue app
body: <p>I'm trying to get a simple Vue+Firebase app running that allows you to send strings to the firebase database and have the messages be displayed using the "v-for" directive. However, I keep getting the error</p>
  
  <p><code>Property or method "messages" is not defined on the instance but referenced during render</code></p>
  
  <p>even though I'm pretty sure I'm using the correct syntax based on Vue's example on their site and the Vuefire github page to link up <code>messages</code> to the database. I can push to the database just fine, but for some reason I can't read the data from the database. I've been unable to get this to work for about a day and at this point any help is appreciated. </p>
  
  <p>Here is my code for reference:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        // Initialize Firebase
        var config = { ... };
        firebase.initializeApp(config);
      &lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
       &lt;div id="app"&gt;
        &lt;input type="text" v-model="message" placeholder="Type a message!"&gt;
        &lt;button v-on:click="sendData"&gt;Send Data&lt;/button&gt;
        &lt;br&gt;
        &lt;h3 v-for="msg in messages"&gt;{{msg.value}}&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>var messageRef = firebase.database().ref('local/responses');
  
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        message: ''
      }
    },
    firebase: function () {
      return {
        messages: messageRef
      }
    },
    methods: {
      sendData: function () {
        messageRef.push(this.message);
        this.message = '';
      }
    }
  });
  </code></pre>