Vuefireを使用して投稿一覧を表示させたいです

前提・実現したいこと

現在、Vue.jsを学習しており、簡易な掲示板を作成しようとしております。
Cloud Firestoreを使用して、メッセージの投稿及び過去の投稿一覧表示まで実装できました。

そして、メッセージ投稿した際にリアルタイムに反映される機能を実装しようと考え、
「Vuefire」を使用して、メッセージ一覧を表示させようとしております。
しかし、「Vuefire」を使用して、firestoreに保存している投稿を取得しようとすると、
投稿一覧には、1件しかメッセージデータが表示されませんでした。

肝心の投稿がリアルタイムに反映される機能については、問題なく動いておりますが、
画面をリロードすると再び、投稿一覧には、1件のデータしか表示されておりません。

この状態を解決し、過去の投稿を一覧表示させたいのですが、
どうか、お知恵をお貸しいただけないでしょうか。

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

投稿メッセージ一覧画面に1件しか、データが表示されないという問題です。
Macのターミナル上には、エラーは出ておりません。

Chromeブラウザのコンソールには、以下のようなエラーメッセージが出ており、
こちらを解決する必要があるのではないかと考えております。

console
1Uncaught TypeError: Cannot convert undefined or null to object  vuefire.esm.js:299 
2    at Function.keys (<anonymous>)
3    at subscribeToRefs (vuefire.esm.js:299)
4    at Object.added (vuefire.esm.js:363)
5    at eval (vuefire.esm.js:439)
6    at Array.forEach (<anonymous>)
7    at Array.eval (vuefire.esm.js:438)
8    at next (index.esm.js:16653)
9    at eval (index.esm.js:13412)

該当のソースコード

投稿一覧を表示するためのコンポーネント「CommentList.vue」のソースです。
ソース下部にあるfirestore関数を使用して、Firestoreからメッセージデータを全件取得し、
template内のv-forディレクティブを使用して一覧表示させようとしております。

JavaScript
1<template>
2  <div class="bbs__contents__list">
3    <div class="bbs__contents__list--hige"></div>
4    <div class="bbs__contents__list__comment" v-for="(post, index) in posts" :key="index">
5      <div class="bbs__contents__list__comment__main">
6        <div class="bbs__contents__list__comment__main--name">{{ post.nickname }}</div>
7        <div class="bbs__contents__list__comment__main--comments">{{ post.comment }}</div>
8        <div class="bbs__contents__list__comment__main--createat">{{ post.timeStamp.toDate() }}</div>
9      </div>
10    </div>
11  </div>
12</template>
13
14<script>
15import db from '@/firebase/vuefire';
16export default {
17  data() {
18    return {
19      posts: []
20    }
21  },
22  firestore() {
23    return{
24      posts: db.collection('posts').orderBy("timeStamp","desc")
25    }
26  }
27}
28</script>

先程のコンポーネントにimportしている「vuefire.js」のソースです。
こちらは、さらに「firebase.js」をインポートしております。

JavaScript
1import Vue from 'vue'
2import { firestorePlugin } from 'vuefire'
3import firebaseApp from './firebase.js';
4
5Vue.use(firestorePlugin)
6
7const db = firebaseApp.firestore();
8
9export default db

先程の「vuefire.js」にimportしている「firebase.js」のソースです。
一部、firebaseの認証に関する項目を「*」に変更しております。

JavaScript
1import Firebase from 'firebase'
2import 'firebase/firestore'
3
4const config = {
5  apiKey: "*************************************",
6  authDomain: "*********************************",
7  databaseURL: "********************************",
8  projectId: "*************",
9  storageBucket: "******************************",
10  messagingSenderId: "*************",
11  appId: "**************************************",
12  measurementId: "**************"
13}
14
15const firebaseApp = Firebase.initializeApp(config);
16
17firebaseApp.getCurrentUser = () => {
18  return new Promise((resolve, reject) => {
19    const unsubscribe = firebaseApp.auth().onAuthStateChanged(user => {
20      unsubscribe()
21      resolve(user);
22    }, reject);
23  });
24};
25
26export default firebaseApp

試したこと

① vuefireのGithubを確認して、$bindを使用した方法を試しました。
結果、同じように1件しかデータが取得できませんでした。
URL:https://github.com/vuejs/vuefire/tree/master/packages/vuefire

② vuefire導入前のコードに戻して、一覧表示が可能かを確認しました。
こちらは、問題なく表示されましたが、リアルタイムに投稿が反映されなくなりました。
なお、該当コードは以下の通りで、CommentList.vueコンポーネント内のfirestore関数をこちらに書き換えました。

JavaScript
1  created() {
2    const docRef = db.collection("posts");
3    docRef.orderBy("timeStamp","desc").limit(4).get()
4    .then(response => {
5      response.forEach((doc) => {
6        this.posts.push(doc.data());
7      });
8    })
9    .catch(() => {
10      router.push('/bbs/login');
11    });
12  }

③ エラーメッセージについて検索を行いました。
1時間ほど行いましたが、vuefireを使用した例が見つけられませんでした。
ionicやthree.jsの事例などはありましたが、いずれも私にとって非常に難解に感じられ、
投稿された内容を読み解くことができませんでした。

④ ローカルサーバーの再起動やブラウザのリロードをしました。
こちらは、変化がありませんでした。

⑤ vuefire公式のドキュメントを確認し、コードの誤りなどについてチェックしました。
メソッドの定義方法などを公式ドキュメントに合わせましたが、結果は変わりませんでした。

⑥ vuefire公式ドキュメントのintroductionに掲載されているvuefireを使用する前のコード、
onSnapshotなどをを使用した見本コードを使用してみました。
メッセージの一覧が取得できましたが、ドキュメントに割り振られているIDが取得できなかっっため、
メッセージ削除機能が使用できず、実装を諦めました。

⑦ vuefireのGithub内にあるIssueを一通り確認しましたが、同じような症状を見つけることができませんでした。

⑧ 指定した1件が取得できないかと以下のコードを試しました。

JavaScript
1  firestore: {
2    posts: db.collection('posts').doc('ID指定************'),
3  },

こちらのコードは、動きませんでしたが、なぜか「.doc('ID')」を削除した直後にホットリーロードがされると
指定したドキュメントが取得できている（リロードすると）再び元の状態に戻るみたいな動きになりました。

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

vueのバージョン：@vue/cli 4.5.7

その他のプラグイン等のバージョンは、package.jsonのdependenciesの内容をコピーします。

json
1  "dependencies": {
2    "core-js": "^3.6.5",
3    "firebase": "^8.0.2",
4    "firebaseui": "^4.7.1",
5    "vue": "^2.6.11",
6    "vue-router": "^3.2.0",
7    "vuefire": "^2.2.0-alpha.0",
8    "vuex": "^3.4.0"
9  },