Firestoreのコレクションから取得したidで他のコレクションを検索すると、2番目以降の検索結果が表示されない

前提・実現したいこと

Vue3とFirestoreを学習しており、その一環でチームとメンバーを管理できる画面を作りたいと考えています。
いま現在つまづいている箇所があり、解決のヒントを頂ければと思い、投稿させていただきます。

この画面を作る上で、MemberList.vueではFirestoreの”teams”から取得したチームのリストをv-forで回しtableをチームごとに表示、Members.vueではMemberList.vueから渡されたteamIdでFirestoreの"users"から各ユーザーの"teamId"をそれぞれ参照し、一致するものだけをテーブルに表示するということを実現したいです。

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

チームのリストは問題なく取得できており、teamIdも渡せていることは確認しています。

"users"から各ユーザーの"teamId"をそれぞれ参照し、一致するものだけをテーブルに表示する

この部分で、2番目以降のチームのメンバーが正しく取得できません。

該当のソースコード

MemberList.vue

javascript
1<template>
2  <table class="table" v-for="(team, index) in dataTeams" :key="index">
3    <caption class="caption-top">
4      {{team.name}}
5    </caption>
6    <thead>
7      <tr>
8        <th>氏名</th>
9        <th>学年</th>
10        <th></th>
11      </tr>
12    </thead>
13    <Members :teamId=team.id></Members>
14  </table>
15</template>
16
17<script>
18import Members from "@/components/Members.vue";
19import db from "../firebase.js";
20
21export default {
22  name: "MembersList",
23  components: {
24    Members,
25  },
26  data() {
27    return {
28      dataTeams: [],
29    };
30  },
31  created: function () {
32    db.collection("teams")
33      .get()
34      .then((querySnapshot) => {
35        querySnapshot.forEach((doc) => {
36          this.dataTeams.push({
37              id: doc.id,
38              name: doc.data().name
39          });
40        });
41      });
42  },
43};
44</script>

Members.vue

javascript
1<template>
2  <tbody>
3    <tr v-for="(member, index) in dataMembers" :key="index">
4      <td>{{ member.name }}</td>
5      <td>{{ member.schoolYear }}</td>
6      <td>
7        <div class="float-end">
8          <button type="button" class="btn bnt-link text-danger">Delete</button>
9        </div>
10      </td>
11    </tr>
12  </tbody>
13</template>
14
15<script>
16import db from "../firebase.js";
17
18export default {
19  data() {
20    return {
21      dataMembers: []
22    };
23  },
24  props: {
25      teamId: String
26  },
27  mounted: function () {
28    db.collection("members").where("teamId", "==", this.teamId)
29      .get()
30      .then((querySnapshot) => {
31        querySnapshot.forEach((doc) => {
32          this.dataMembers.push(doc.data());
33        });
34      })
35      .catch((error) => {
36        console.log("Error getting documents: ", error);
37    });
38  },
39};
40</script>

Firestore
membersコレクション

usersコレクション

自分で調べたことや試したこと

componentを分けるのではなく、db.collection("teams")にdb.collection("members")をネストさせてみましたがエラーが出ました。
自分で調べた限りはこのようにネストさせているものは見当たりませんでした。

どの時点までteamIdが渡されているかを確認したところ、db.collection("members")の外では問題なく渡されていましたが、querySnapshot.forEach((doc) => {の中には渡されていませんでした。
そこで、コレクションを参照するときは、ループごとに何かしらの初期化が必要なのではないかと調べてみたのですが、最初にfirebaseに接続する際に初期化する必要があるという情報しか見つからず、不明のままです。