title: Vue.js props not defined in Component
body: <p>The parent <code>app</code> has an object <code>messages</code>, that is being filled correctly from the server. But the <code>chat-room</code> component's props <code>messages</code> is not feeding from the parent's <code>messages</code>. What am I missing??</p>
  
  <p>Here is my blade template:</p>
  
  <pre><code>&lt;chat-room&gt;&lt;/chat-room&gt;
  &lt;chat-composer v-on:messagesent="addMessage"&gt;&lt;/chat-composer&gt;
  </code></pre>
  
  <p>Here is my <code>chat-room</code> component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="chat-room"&gt;
      &lt;chat-message v-for="message in messages" :message="message"&gt;&lt;/chat-message&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props : ['messages'],
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my app.js:</p>
  
  <pre><code>Vue.component('chat-message', require('./components/ChatMessage.vue'));
  Vue.component('chat-room', require('./components/ChatRoom.vue'));
  Vue.component('chat-composer', require('./components/ChatComposer.vue'));
  
  const app = new Vue({
    el: '#app',
    data: {
      messages: []
    },
    methods: {
      addMessage(message) {
        this.messages.push(message);
        axios.post(base_url+'/room/1/write_message', message).then(response =&gt; { });
      }
    },
    created() {
      axios.get(base_url+'/room/1/messages').then(response =&gt; {
        this.messages = response.data;
        console.log(this.messages); //this returns an Array[4]!
      });
    }
  });
  </code></pre>