APIで取得した画像データをNuxtで表示できない

Question

実現したいこと

API(Express)経由でサーバ上の画像ファイルの内容を取得して、Nuxtで表示したい。

前提

Nuxtで作成している画面で、画像ファイルを表示させようとしています。
ファイルパスを指定してAPIを呼び出し、当該パスにある画像ファイルのデータを返す仕組みとしています。
Vue.jsやNuxtを触り始めて1ヶ月ほどで分からぬことも多く試行錯誤ばかりなのですが、よろしくおねがいします。

しかし、以下のような問題が発生しています。

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

ブラウザ上に何も表示されない。
しかし、開発環境でVueファイルを更新したタイミングで取得していた画像が表示されます。
リロードすると再び表示されない状態になってしまうのですが。
レスポンスの中身を見てみると、APIからは指定したデータが返ってきているように見えます。

該当のソースコード

<img :src="item.imageContent" :key="item.imageContent" alt="取得した画像">
・・・
    data() {
      return {
        imageContent: null,
・・・
 async mounted() { 

    const imagePath = this.item.image_path;
    const imageResponse = await this.$axios.get(`/api/imagecontent?path=${encodeURIComponent(imagePath)}`, { responseType: 'blob' });
    const imageContent = URL.createObjectURL(imageResponse.data); // 画像ファイルのデータは返ってきているように見えている
    this.item.imageContent = imageContent;

###試したこと・調べたこと
ネット上で検索（海外サイトはほぼ探せていません）
開発ツールでAPIとの連携状況の確認

補足情報（FW/ツールのバージョンなど）

"nuxt": "^2.15.8",
"vue": "^2.7.10",
"express": "^4.18.3",
"@nuxtjs/axios": "^5.13.6",

Comments

[m.ts10806]

ご提示の内容からは読み取れなかったのですが「画像ファイルのデータ」とは具体的に何が返ってきているのでしょう？
コンソール出力したキャプチャなど追記願います。

Answer 1

Vue.setで解決しました。
仕組み上、こうしないといけなかったものなのか、付け焼き刃的な対応なのかが分かっていないのですが。

                    const imageURL = URL.createObjectURL(imageResponse.data);
                    this.$set(item, 'imageContent', imageURL);