firebaseに保存したデータを表示させたい

Question

前提・実現したいこと

inputで入力した文字をfirebaseに保存し、それを取得して画面上に表示させたい

発生している問題・エラーメッセージ

エラーメッセージはありませんでした

該当のソースコード

<template>
  <div class="app">
    <input v-model="text" type="text" class="text-input" />
    <button v-on:click="postTweet">ツイート</button>
    <div>
      <p v-for="tweet in tweets" v-bind:key="tweet.id">{{ text }}:{{ time }}</p>
    </div>
  </div>
</template>

<script>
import firebase from "firebase"

export default {
  data() {
    return {
      text: "",
      time: new Date(),
      tweets: [],
    }
  },
  methods: {
    postTweet() {
      firebase
        .firestore()
        .collection("tweets")
        .add({ ツイート: this.text, 日時: new Date() })
    },
  },

  created() {
    firebase
      .firestore()
      .collection("tweets")
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          this.tweets.push({
            id: doc.id,
            ...doc.data(),
          })
        })
      })
  },
}
</script>

試したこと

collectionにaddしたものを取得して配列に受け渡そうとしているのですが、うまく実装できてない状態です。どうかご教授ください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

Vue よく分かりませんが、表示するデータは最初に取得してるだけですよね。データの変更完了後に取得し直すか、リアルタイムで更新通知を受けるようにすれば良いのでは。