Cannot read data from Firestore - Vue.js

I'm trying to create a simple Vue.js app with Firebase as a backend. When I'm trying to list render I cannot display the intended property from Firebase. I'm still a newbie in all of this and I couldn't make it work with the other posts. I think I'm reading data incorrectly from Firebase so my routing is incorrect.

ChatUI.vue:

<div @v-for="message in messages" :key="message.message" class="incoming_msg">
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p></p>
                  <span class="time_date">11:01 AM | June 9</span>
                </div>
              </div>
            </div>

main.js:

export default {
  data: function() {
    name: "ChatUI";
    return {
      message: '',
      messages: []
    };
  },
  methods: {
    saveMessage() {
      //save to firestore
      db.collection("chat").add({
        message: this.message,
        time: new Date()
      });
      this.message = null;
    },
    fetchMessages() {
      db.collection("chat")
        .orderBy("time")
        .onSnapshot(querySnapshot => {
          let allMessages = [];
          querySnapshot.forEach(doc => {
            allMessages.push(doc.data());
          });
          this.messages = allMessages;
        });
    }
  },
  created() {
    this.fetchMessages();
  }
};