プロフィール画像を選択後、選択した画像を表示させる

◆参考記事：Vue.jsは気難しい（オブジェクト編）

以下ではプロフィール画像とプロフィール情報を設定しております。

<script>
export default {
  data() {
    return {
      name: "",

    ~ 省略 ~

      preview: "",
      uploadedImage: {
      fileUrl: require("../assets/デフォルトの画像.jpg"),
      time: null,
      }
    };
  },

 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) //さっき決めたパスを参照して、
                            .put(this.file); //保存する
                        uploadTask.then(() => {
                            uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
                                //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。
                                this.$set(this, "uploadedImage", {
                                    fileUrl: fileUrl,
                                    time: firebase.firestore.FieldValue.serverTimestamp(),
                                });
                                console.log(fileUrl, this.uploadUrl);
                                uploadParam = { uploadedImage: this.uploadedImage };
                                //uploadParamへuploadedImageを代入。
                                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と同様。
                                    );
                                const currentUser = firebase.auth().currentUser;
                                currentUser
                                    .updateProfile({
                                        photoURL: fileUrl,
                                    })
                                    .then(() => { })
                                .catch(()=>{
                                });
                            });
                        });
                    }
                    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",
                    });
                } else {
                    this.$swal("キャンセルしました。");
                }
            })
            .catch(() => {
              this.$swal("更新出来ませんでした。", {
                icon: "error",
              });
              this.preview = ""
              //更新をキャンセルした場合、空にする。
            });
        },

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.$set(this, "uploadedImage",this.profileData.uploadedImage || this.uploadedImage);
          //変更検知がvue側行わせる為に上記を追記。
          this.genre = this.profileData.genre || "";
          this.favMovie = this.profileData.favMovie || "";
          //全てのデータを取得して、profileDataへ代入。
        });
    }
},

変更検知をvue側に行わせる為にset()を使用してキー追加すると、検知機構を持つプロパティに変換される。

※ここで記載しているthisはコンポーネントのことです。

this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入する際

uploadTask.then(() => {
   uploadTask.snapshot.ref.getDownloadURL().then((fileUrl) => {
    this.$set(this, "uploadedImage", {
                                    fileUrl: fileUrl,
                                    time: firebase.firestore.FieldValue.serverTimestamp(),
                                });

プロフィール情報及びプロフィール画像を取得する際

this.$set(this, "uploadedImage",this.profileData.uploadedImage || this.uploadedImage);

検知機構を持たせたい箇所にはset()を使用すると変更検知をvue側に行わせることが出来ます。