【vue.js × Firebase】新規登録時にユーザーネームを取得してマイページに表示させたい。

#新規登録時にユーザーネームを取得してマイページに表示させたい。

現在下記のようにフォームを設けてメールアドレスとパスワードで登録できるようにしてます。

その際にユーザーネームもあわせて取得できるようにしてます。

###新規登録ページ

<template>
  <div>
    <Header />
    <div class="signup flex">
      <div class="signup-inner flex">
        <h2>新規登録</h2>
        <input type="text" placeholder="Username" v-model="userName" />
        <input type="text" placeholder="Email" v-model="email" />
        <input type="password" placeholder="Password" v-model="password" />
        <button class="btn-signup" @click.prevent="signUp">登録</button>
        <p>
          既に登録済みの方は
          <router-link to="/signin">こちらへ</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Vue from "vue";
import VueSwal from "vue-swal";
Vue.use(VueSwal);
export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: "",
      userName: "",
    };
  },
  components: {
    Header,
  },
  methods: {
    //以下、「メールアドレス」と「パスワード」を使った新規登録の実装。
    signUp() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        //ユーザーから提供されたメールアドレスとパスワードを検証し、それらをcreateUserWithEmailAndPassword メソッドに渡す。
        .then((willDelete) => {
          if (willDelete) {
            this.$swal("登録に成功しました。", {
              icon: "success",
            });
            this.$router.push("/signin");
          }
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error",
          });
        });
    },
  },
};
</script>

###マイページ

<template>
  <div>
    <Header />
    <div class="mypage flex">
      <div class="mypage-inner flex">
        <div class="profile-inner flex">
          <img
            class="profile-inner-img"
            src="../assets/アイコン.jpg"
            alt="デフォルト画像"
          />
          <div class="profile-inner-name">{{ allData.name }}</div>
        </div>
        <div class="profile-inner2 flex">
          <div class="follow-inner">
            <div class="post">
              <div>0</div>
              <p>POSTS</p>
            </div>
            <div class="follow">
              <div>0</div>
              <p>FOLLOW</p>
            </div>
            <div class="follower">
              <div>0</div>
              <p>FOLLOWER</p>
            </div>
          </div>
</template>