Как преобразовать приложение чата Vue.js в реальном времени из базы данных реального времени в Firestore

Question

Я пытаюсь создать приложение для чата в реальном времени с Vue.js и Firebase, основываясь на следующем учебном пособии: https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app. В этом учебнике используется база данных Firebase Realtime для управления чатами в динамически создаваемых чатах. Моя цель - полностью преобразовать приложение из базы данных в реальном времени в Firestore. До сих пор я успешно реализовывал методы firebase.get() и firebase.add() в компонентах "Room.vue" и "AddRoom.vue", чтобы добавить комнаты чата в базу данных и вернуть комнаты чата в список комнат в "Комнате". .vue». Для "Chat.vue" у меня возникли некоторые проблемы с перенастройкой хука жизненного цикла created() для правильной установки информации о пользователе в базе данных и отображения этой информации о пользователе в выбранном чате. Текущая настройка базы данных реального времени для хука created() в учебнике выглядит следующим образом:

  created () {
    let joinData = firebase.database().ref('chatrooms/'+this.roomid+'/chats').push();
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    firebase.database().ref('chatrooms/'+this.roomid+'/chats').on('value', (snapshot) => {
      this.chats = [];
      snapshot.forEach((doc) => {
        let item = doc.val()
        item.key = doc.key
        this.chats.push(item)
      });
    });
  },

Этот хук позволяет создать подколлекцию внутри chatrooms, называемую chats, которая получаетroomid генерируется в Room.vue и, в конечном итоге, возвращает информацию о чате пользователя в шаблон. Я хочу добиться чего-то похожего с Firestore, а не с базой данных в реальном времени. До сих пор я пытался перенастроить компонент Chat.vue следующим образом:

<script>

import { firebase } from '../Firebase'
import router from '../router'

export default {
  name: 'Chat',
  data () {
    return {
        roomid: this.$route.params.roomid,
        roomname: this.$route.params.roomname,
        nickname: this.$route.params.nickname,
        data: { type:'', nickname:'', message:'' },
        chats: [],
        errors: [],
        offStatus: false
    }
  },
  async created () {
    let joinData = await firebase.push()
    joinData.set({
      type: 'join',
      user: this.nickname,
      message: this.nickname+' has joined this room.',
      sendDate: Date()
    });
    this.data.message = '';
    let snapshot = await firebase.get()
    const chats = []
    snapshot.forEach(doc => {
      let appData = doc.data()
      appData.key = doc.key
      rooms.push(appData)
    })
      this.chats = chats
  }
  },
  methods: {
    onSubmit (evt) {
        evt.preventDefault()

        let newData = firebase.get()
        newData.add({
            type: 'newmsg',
            user: this.nickname,
            message: this.data.message,
            sendDate: Date()
        });
        this.data.message = '';
    },
    exitChat () {
      let exitData = firebase.get()
      exitData.set({
        type: 'exit',
        user: this.nickname,
        message: this.nickname+' has exited this room.',
        sendDate: Date()
      })

      this.offStatus = true
      router.go(-1)
    }
  }
}
</script>

... так, чтобы хук жизненного цикла и методы вместо этого отправляли и извлекали данные в и из Firestore. Я не уверен, как настроить хук и методы для создания и взаимодействия с вложенной коллекцией для чатов внутри существующего чата в Firestore, как это было сделано в примере базы данных реального времени в учебном пособии. Любые рекомендации, как добиться этого с Firestore? Спасибо!