【Vue x Firebase】updateProfileメソッドでユーザー情報を更新したが情報が一部反映されない。

VueとFirebaseを使用してアプリ制作をしており、新規登録時に名前(displayName)と初期アイコン(photoURL)を
updateProfile()を使って設定し、そこで設定された名前とアイコンは初期情報として
保存してユーザーのマイページに表示するようにしております。

そのプロフィール情報をもとにチャットページでは自身の情報「名前(displayName)」と「アイコン(photoURL)」を
以下のように表示するようにしております。

 <div class="myimage flex">
  <img :src="user.photoURL" width="50" height="50" />
  <div class="myname flex">{{ user.displayName }}</div>
 </div>

しかし、マイページにてプロフィール情報を更新すると、「Storage」「Firestore」には
正しくプロフィール情報が保存されていることは確認できていますが、
現状なぜか一部「名前(displayName)」と「アイコン(photoURL)」は更新されない状態です。

#新規登録(signup.vue)

  signUp() {
      let self = this;
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(userCredential => {
          userCredential.user.updateProfile({
            displayName: self.name,
            photoURL: require("../assets/デフォルト画像.jpg")
          });
          this.$swal("登録に成功しました。", {
            icon: "success"
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(this.uid)
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error"
          });
        });
    }
  }
};

※ユーザーのプロフィールを更新するを参照しながら設定を行いました。

マイページでは「mypageeditxllg.vue(1024px以下1025px以上)」「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」と画面サイズに応じてコンポーネントで細分化して実装を行っております。

しかし、「mypageeditxllg.vue(1024px以下1025px以上)」では、自身のプロフィール情報（displayNameとphotoURL）が
更新した内容に変更され、表示されることは確認できておりますが、なぜか「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更がされません。

ちなみに「mypageeditxllg.vue(1024px以下1025px以上)」のコードをそのままコピーし、実装しております。

チャットぺージのコンポーネントは一つで実装してます。

なぜ「mypageeditxllg.vue(1024px以下1025px以上)」では変更され表示されるのに、
「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更・表示されないのか
原因が分からない状況です。

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

どうかよろしくお願いいたします。

以下はマイページ更新するコンポーネントになります。

mypageeditxllg.vueと名前にあるように
「mypageeditxllg.vue(1024px以下1025px以上)」のソースを掲載してます。

#マイページ更新（mypageeditxllg.vue）

  methods: {
    onFileChange(e) {
      const image = e.target.files; //選択された画像ファイルを選択
      this.file = image[0]; //画像ファイルを1つだけ選択
      const S =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      const N = 16;
      this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N)))
        .map(n => S[n % S.length])
        .join("");
      // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入
      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として読み込み、458行目(fileReader.result)が発火する。
    },
    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); //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()
                  });
                  uploadParam = { uploadedImage: this.uploadedImage };
                  //選択されたプロフィール画像含めプロフィール情報をfirestoreへ保存
                  firebase
                    .firestore()
                    .collection("users") //保存する場所を参照して、
                    .doc(this.$route.params.uid)
                    .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と同様。
                    )
                    .then(() => {
                      this.$router.go({
                        path: `/mypage/${this.$route.params.uid}`,
                        force: true
                      });
                    })
                    .catch(() => {
                      this.$swal("更新出来ませんでした。", {
                        icon: "error"
                      });
                    });
                  const currentUser = firebase.auth().currentUser;
                  currentUser.updateProfile({
                    displayName: this.name,
                    photoURL: fileUrl
                  });
                });
              });
            } else {
              firebase
                //プロフィール画像が選択されなかった場合、画像以外のプロフィール情報をfirestoreへ保存
                .firestore()
                .collection("users")
                .doc(this.$route.params.uid)
                .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 }
                )
                .then(() => {
                  this.$router.go({
                    path: `/mypage/${this.$route.params.uid}`,
                    force: true
                  });
                })
                .catch(() => {
                  this.$swal("更新出来ませんでした。", {
                    icon: "error"
                  });
                });
              const currentUser = firebase.auth().currentUser;
              currentUser.updateProfile({
                displayName: this.name
              });
            }
          } else {
            this.$swal("キャンセルしました。");
          }
        })
        .catch(() => {
          this.$swal("更新出来ませんでした。", {
            icon: "error"
          });
          this.preview = "";
          //更新をキャンセルした場合、this.previewを空にする。
        });
    },