「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を リアルタイムで表示を画面上で切り替えたい

Question

ブックマーク機能は実装できましたが、「ブックマーク保存された時のアイコン」と「ブックマーク取り消しされた時のアイコン」を
リアルタイムで表示を画面上で切り替えたいと考えております。
それぞれアイコンを押下後、手動でリロードすればアイコンは切り替わりますが、リロードせずに行いたいです。

※以前にも同じような質問はさせて頂きましたが、画面自体をリロードして解決したため、今回はリロードをせずにアイコンを切り替えたいです。

<img :src="isBookmark" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" v-if="list.isBookmarked"/>
<img :src="isBookmarked" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" v-else />

export default {
  data() {
    return {
      isBookmark: require("../assets/ブックマーク保存.jpg"),
      isBookmarked: require("../assets/ブックマーク未保存.jpg"),
  ~ 省略 ~
    };
  },

お忙しい中大変申し訳ございませんが、ご教示頂けると幸いです。
宜しくお願い致します。

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
        />