【Vue x Firestore】サブコレクション「bookmarks」から投稿情報を取得して表示させたい

Question

#サブコレクション「bookmarks」から投稿情報を取得して表示させたい。

現状、list.vueというコンポーネントにてsavePost()という関数名で投稿を保存するボタンを設け、
「users」というコレクションに「bookmarks」というサブコレクションを作成し
bookmarksにlist: this.list（投稿情報）、uid（保存したユーザー）、time(保存した時間)を格納してます。

#lis.vue（子コンポーネント）

<img src="../assets/ブックマーク.jpg" alt="ブックマーク" class="bookmark-icon" @click="savePost" />

export default {
  data() {
    return {
    };
  },
  props: {
    list: {
      type: Array
    },
},

savePost() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .add({
          uid: this.$route.params.uid,
          list: this.list,
          time: firebase.firestore.FieldValue.serverTimestamp(),
        })
        .then(() => {
          this.$swal("お気に入りに追加しました。", {
            icon: "success"
          });
        });
    },

#board.vue(親コンポーネント)

board.vueにて子コンポーネントのListデータをpropsで渡しています。

<div class="post-items">
          <paginate name="paginate-log" tag="ol" :list="postData" :per="12">
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :userDatas="userDatas" 
              :key="list.id"
            />
          </paginate>
          <paginate-links
            for="paginate-log"
            class="pagination flex"
            v-scroll-to="postTop"
            :show-step-links="true"
          >
          </paginate-links>
          <!--postDataのデータをlist関数とindex関数にそれぞれ格納-->
        </div>

#bookmark.vue

bookmarksというコンポーネントでサブコレクションの「bookmarks」からlist情報を表示させたいと考えておりますが、
以下現状、そのまま保存したユーザーの空listを表示させているだけになってしまっています。

<div class="bookmarkList-posts">
        <paginate name="paginate-bookmarkList" tag="ol" :list="bookmarkList" :per="3">
          <List
            v-for="(list, index) in paginated('paginate-bookmarkList')"
            :index="index"
            :list="list"
            :key="list.id"
          />
        </paginate>
        <paginate-links
          for="paginate-bookmarkList"
          class="pagination flex"
          :show-step-links="true"
          :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
        ></paginate-links>
      </div>

export default {
  data() {
    return {
      paginate: ["paginate-bookmarkList"],
      bookmarkList: []
    };
  },

  created() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.$route.params.uid)
      .collection("bookmarks")
      .orderBy("time", "desc")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.bookmarkList.push(doc.data());
        });
      });
  }
};

青で囲った[list]部を表示させたいのですが、「bookmarkList.list」としても表示されません・・

原因は赤で囲ったエラーコードにもあるように「配列」で取得できておらず、「オブジェクト型」になっていることが
原因かと思われますが、配列に変換させるようなやり方はあるのでしょうか・・

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

Answer 1

ドキュメントのlist内に重ねてlist{配列：配列・・・}として保存してしまっていたので、
...this.listとして配列をばらすことで解決いたしました。

saveBookmark() {
      const ref = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc();

      const id = ref.id;

      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(id)
        .set({
          bookmarkId: id,
          ...this.list,
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },