【Vue x Storage】プロフィール画像を選択後、選択した画像を表示させたいです。

#プロフィール画像を選択後、リアルタイムで選択した画像を表示させたいです。

「プロフィール画像を編集する」を押下してアップロードする画像を選択後、
既存画像から（選択されていない場合デフォルト画像にしてます）選択された画像に切り替えたいです。
しかし、現状は切り替わらず「更新ボタン」を押下して発火させた後、プロフィール画面での表示は
きちんと表示されますが「更新ボタン」を押すまでは編集画面では選択画像が変わらない状態です・・

#試したこと
以下のようにimg内を:src="preview"とするとdata内にで初期画像をデフォルト画像にしているので
プロフィール編集画面では常に初期画像を参照してしまうのですが、画像を選択した際
実装したい挙動になり、画像選択後はすぐに選択された画像に切り替わってくれます。

<img :src="preview" width="200 height="200" class="profile-img" alt="プロフィール画像"/>

プロフィール画像が選択されていない時はデフォルト画像を初期画像として表示して
画像選択されたらプロフィール編集画面で瞬時に選択後切り替えたいです。。

説明がわかりにくくて大変申し訳ございませんが、分かる方いらっしゃいましたら
お力添えをいただきたいです。

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

#実際のコード

<template>
  <div>
    <Header />
    <div class="mypage flex">
      <div class="mypage-inner flex">
        <div class="profile-inner-l flex">
          <img
            class="profile-inner-l-img"
            :src="uploadedImage == '' ? preview : uploadedImage.fileUrl"
            alt="プロフィール画像"
          />
          <div class="profile-inner-l-name txt">{{ profileData.name }}</div>
        </div>
        <div class="profile-inner-r flex">
          <div class="item-inner">
            <div class="post">
              <div class="txt">{{ listData.length }}</div>
              <p>POSTS</p>
            </div>
            <div class="bookmark">
              <div class="txt">{{ bookmarkList.length }}</div>
              <p>BOOKMARK</p>
            </div>
          </div>
          <hr class="separate" />
          <button
            @click="
              show();
              openModal();
            "
            class="profile-edit flex"
          >
            プロフィール編集
          </button>
          <modal
            class="modal-inner"
            v-scroll-lock="open"
            name="edit"
            :width="1100"
            :height="740"
          >
            <div data-modal="edit" aria-expanded="true" class="vm--overlay">
              <div class="vm--top-right-slot"></div>
            </div>
            <div class="modal-header flex">
              <h2 class="profile-tll flex">プロフィールを編集する</h2>
              <hr class="separate" />
            </div>
            <div class="modal-body">
              <div class="profile-inner flex">
                <div class="profile-contens flex">
                  <div class="profile-img-inner flex">
                    <img
                      :src="
                        uploadedImage == '' ? preview : uploadedImage.fileUrl
                      "
                      width="200"
                      height="200"
                      class="profile-img"
                      alt="プロフィール画像"
                    />
                    <label class="profile-txt profile-update">
                      プロフィール画像を編集する
                      <input
                        type="file"
                        @change="onFileChange"
                        style="display:none"
                      />
                    </label>
                  </div>
                  <div class="line"></div>
                  <div class="profile-items flex">
                    <div class="profile-contens flex">
                      <input
                        type="text"
                        class="profile-item"
                        placeholder="名前"
                        v-model="name"
                      />
                    </div>


              　~ 省略~

                  <button
                    class="hide-btn flex"
                    @click="
                      hide();
                      closeModal();
                    "
                  >
                    ×
                  </button>
                </div>
                <button @click="updateBtn" class="update-btn flex">
                  更新
                </button>
              </div>
            </div>
          </modal>
        </div>
      </div>
      <div class="profile-list">
        <ul class="list-item">
          <li class="list-items">
            性別：
            <div class="list-color">{{ profileData.sex }}</div>
          </li>

　~ 省略~

</template>

<script>
import firebase from "firebase";

　~ 省略~


export default {
  data() {
    return {
      name: "",
      sex: "",
      sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }],

　~ 省略~

      ],
      favMovie: "",
      uploadedImage: "",
      profileData: {},
      //配列にしないようにする。
      listData: [],
      paginate: ["paginate-listData", "paginate-bookmarkList"],
      bookmarkList: [],
      open: false,
      file: "",
      preview: require("../assets/デフォルトの画像.jpg"),
    };
  },
  components: {
    Header,
    List,
  },
  methods: {
    onFileChange(e) {
      const image = e.target.files; //選択された画像ファイルを選択
      this.file = image[0]; //画像ファイルを1つだけ選択

      // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入
      const S =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      const N = 16;
      this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N)))
        .map((n) => S[n % S.length])
        .join("");

      let self = this;
      let fileReader = new FileReader();
      //FileReaderは、Fileオブジェクトからデータを読み込むことのみを目的としたオブジェクト
      fileReader.onload = function() {
        //fileReader.onloadは、読み込みが正常に完了した時に発火するイベント
        self.preview = fileReader.result;
        //fileReaderの結果をself.previewへ代入
        //関数の中ではfileReaderの[this]を参照してしまうため、一旦[self]に代入して、[this.]の代わりに[self.] とする
      };
      fileReader.readAsDataURL(this.file);
      //this.fileの値をデータURLとして読み込み、488行目が発火する。
    },
    // updateBtn()が押下されたら、dbインスタンスを初期化して"posts"という名前のコレクションへの参照
    updateBtn() {
      this.$swal({
        title: "内容確認",
        text: "この内容で更新しますか？",
        icon: "info",
        buttons: true,
        dangerMode: true,
      })
        .then((willDelete) => {
          if (willDelete) {
            let uploadParam = {};
            if (this.uploadUrl) {
              const uploadTask = firebase
                .storage()
                .ref(this.uploadUrl) //さっき決めたパスを参照して、
                // .child(this.uploadUrl)
                .put(this.file); //保存する
              uploadTask.then(() => {
                uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
                  //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。
                  const uploadedImage = {
                    fileUrl: fileUrl,
                    time: firebase.firestore.FieldValue.serverTimestamp(),
                  };
                  console.log(fileUrl, this.uploadUrl)
                  uploadParam = { uploadedImage: uploadedImage };
                  //uploadParamへuploadedImageを代入。
                  const currentUser=firebase.auth().currentUser;
                  currentUser.updateProfile({
                  photoURL :  fileUrl
                  })
                  .then(()=>{
                  })

                });
              });
            }
            firebase
              //画像をfirestoreに保存
              .firestore()
              .collection("users") //保存する場所を参照して、
              .doc(this.$route.params.uid) //追加で保存setメソッドを使うと上書きされる
              .set(
                {
                  name: this.name,
                  sex: this.sex,
                  age: this.age,
                  access: this.access,
                  selfpr: this.selfpr,
                  profession: this.profession,
                  genre: this.genre,
                  favMovie: this.favMovie,
                  ...uploadParam,
                  time: firebase.firestore.FieldValue.serverTimestamp(),
                  //サーバ側で値設定
                },
                { merge: true }
                //set()でmergeをtrueにすると、上書き。updetaと同様。
              );
            this.$swal("更新しました。", {
              icon: "success",
            });
            // this.$router.go({
            //   path: `/mypage/${this.$route.params.uid}`,
            //   force: true,
            // });
            //プロフィール編集されたらページをリロード
          } else {
            this.$swal("キャンセルしました。");
          }
        })
        // .catch(() => {
        //   this.$swal("更新出来ませんでした。", {
        //     icon: "error",
        //   });
        // });
    },

　~ 省略~

  },
  created() {
    const currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;

    if (currentUser) {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .get()
        .then((snapshot) => {
          this.profileData = snapshot.data();
          this.name = this.profileData.name || "";
          this.sex = this.profileData.sex || "";
          this.age = this.profileData.age || "";
          this.access = this.profileData.access || "";
          this.selfpr = this.profileData.selfpr || "";
          this.profession = this.profileData.profession || "";
          this.uploadedImage = this.profileData.uploadedImage || "";
          this.genre = this.profileData.genre || "";
          this.favMovie = this.profileData.favMovie || "";
          //全てのデータを取得して、profileDataへ代入。
        });
    }
 
　~ 省略~

};
</script>

#追記2