Firestoreにて画面上リアルタイムで「ブックマーク保存」と「ブックマーク未保存」を切り替えたい

Question

ブックマーク機能を実装しており、画面上リアルタイムで「ブックマーク保存」と「ブックマーク未保存」を切り替えたいです。

現状、手動でリロードしないとリアルタイムで画面は切り替わっていない状況です。
Firestoreでは画面上で保存・削除ともに動作はしているのですが、
手動でリロードせずともリアルタイムで動作を確認できるようにしたいです。

表示コードは以下のようになっております。

<img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-if="isBookmarked = true"/>
<img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-else />

「saveBookmark」したときに、this.isBookmarked=trueにして、v-if, v-elseでthis.isBookmarkedによって、表示するアイコン変えられるようにbookmarkを追加したときに、dataを変更すればいいのかと思い以下のようにしましたが、全ての投稿がtrueになってしまっております・・

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

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

#実際のコード

<template>
  <div class="list">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          :src="
            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
          "
        />
        <h3>{{ list.title }}</h3>
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
        <img
          src="../assets/ブックマーク保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="deleteBookmark"
          v-if="isBookmarked = true"
        />
        <img
          src="../assets/ブックマーク未保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="saveBookmark"
          v-else
        />
        <p class="post-time">{{ $dayjs(list.time.toDate()).format('YYYY/MM/DD HH:mm') }}</p>
      </div>
    </div>
  </div>
</template>

data() {
    return {
      bookmark: require(),
      isBookmarked: false,
      userDatas: [],
      preview: require("../assets/デフォルト画像.jpg")
    };
  },
  props: {
    list: {
      type: Object
      //親コンポーネント(board.vue)のlist[Object型]をpropsで渡している。
    },
    index: {
      type: Number
      //親コンポーネント(board.vue)のindex[Number型]をpropsで渡している。
    }
  },

　~ 省略 ~ 

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

      firebase
        .firestore()
        .collection("users") //「users」コレクションを参照
        .doc(this.$route.params.uid) //対象ページのユーザーを参照
        .collection("bookmarks") //「bookmarks」サブコレクションを参照
        .doc(id) //自動生成されたドキュメントIDを参照
        .set({
          postId: this.list.id, //「postId」に投稿データである「this.list.id」を代入。
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
          this.isBookmarked = true;
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },

    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .where("postId", "==", this.list.id)
        //postIdをフィルタリングして投稿idであるthis.list.idと合致するもののみを参照
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            //forEachで全てのドキュメントに対して
            doc.ref //ドキュメントの数だけrefを参照して
              .delete() //削除を実行
              .then(() => {
                this.$swal("ブックマークを取り消ししました。", {
                  icon: "success"
                });
                this.isBookmarked = false;
              })
              .catch(() => {
                this.$swal("ブックマークを取り消し出来ません。", {
                  icon: "error"
                });
              });
          });
        });
    },
</script>

Comments

[m2l]

回答依頼確認致しました。
少し私生活がバタバタしており、回答にお時間おかけしますが、回答させて頂きますので宜しくお願いします。

[TMTN]

有難う御座います。
本当に申し訳御座いませんが、よろしくお願いいたします。

[TMTN]

m2l様

お世話になっております。
こちらの件、回答依頼していて申し訳御座いませんが、
自身でなんとか解決することができました！

Answer 1

テンプレート内を以下のように修正し、解決いたしました。
data内は不要だったため、削除しています。

<img
          src="../assets/ブックマーク保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="deleteBookmark"
          v-if="list.isBookmarked"
        />
        <img
          src="../assets/ブックマーク未保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="saveBookmark"
          v-else
        />