Nuxt.jsのstoreを用いたオブジェクトの取得ができないです。

store側

javascript
1import firebase from '~/plugins/firebase'
2const db = firebase.firestore();
3const contentsRef = db.collection('contents')
4
5export const state = () => ({
6  reactions: {},
7})
8
9export const mutations = {
10  addReaction(state, data) {
11    state.reactions[data.kind] = {
12      status: data.status,
13      count: data.count,
14    }
15  },
16}
17
18export const actions = {
19  fetchReactions({
20    commit
21  }, content) {
22
23// ↓↓↓無視してもいい部分↓↓↓
24
25    const reactions = ["comments", "likes", "questionnaires"];
26    commit('clearReactions')
27    reactions.forEach((reaction) => {
28      contentsRef.doc(content.content_id).collection(reaction).get().then((res) => {
29        const number = res.size
30        contentsRef.doc(content.content_id).collection(reaction).doc(content.user_id).get().then((doc) => {
31          if (reaction == "questionnaires") {
32            contentsRef.doc(content.content_id).collection(reaction).where("kind", "==", "funny").get().then((response) => {
33
34// ↓↓↓注目して欲しい部分
35
36              commit('addReaction', {
37                kind: reaction,
38                status: doc.exists,
39                count: response.size / number
40              })
41            })
42          } else {
43
44/// ここでaddReactionにオブジェクトを渡しています。
45
46            commit('addReaction', {
47              kind: reaction,
48              status: doc.exists,
49              count: number
50            })
51          }
52        })
53      })
54    })
55  }
56}
57
58export const getters = {
59  getReactions(state) {
60    return state.reactions
61  }
62}

フロント側

javascript
1<template>
2  <div>
3    {{ $store.getters["contents/getReactions"] }}
4   
5  </div>
6</template>
7
8<script>
9import firebase from "~/plugins/firebase";
10export default {
11  created() {
12    firebase.auth().onAuthStateChanged((user) => {
13      if (user) {
14        this.user_id = user.uid;
15        this.$store.dispatch("contents/fetchReactions", {
16          user_id: this.user_id,
17          content_id: this.content_id,
18        });
19      }
20    });
21  },
22};
23</script>
24

期待するweb画面上の実行結果

javascript
1{ "comments": { "status": false, "count": 1 }, "likes": { "status": true, "count": 2 }, "questionnaires": { "status": true, "count": 1 } }

mutations側のaddReaction関数に、actionsの関数からオブジェクトを渡しています。
このコードを実行すると、webの画面に実行結果が表示されないです。
created()の中で
console.log(this.$store.getters["contents/getReactions"])
を実行すると、結果が出力されているのでstoreからフロントエンド側への値の受け渡しには成功していると思われます。

また、オブジェクトのデータを[{}, {}, {}]のような配列の形にして実行すると、webの画面に実行結果が表示されます。

それと試しに、firebaseによる処理を一切行っていないオブジェクトをactionsの関数からaddReaction関数に渡してみたところ、問題なくweb画面に表示されたので、おそらくfirebaseの処理に膨大な時間がかかっているため、webの表示に間に合わなかったのではないかという予想を立てています。

storeでの処理が重くなった場合にどう対応すればよいのか、また他に解決方法があれば教えて頂けると幸いです。

よろしくお願いします。