firebaseで画面遷移後にユーザー名を表示させたい

現在firebaseにて画面遷移後に登録時に入力したユーザー名を表示させる処理を書いているのですが、画面遷移した時は、ユーザー名が表示されないのですが、リロードをするとユーザー名が表示されるようになります。ただ、ログインをしたときは、最初から表示されます。私が、試したこととしては、現在はonAuthStateChangedを使用しているのですが、currentUserを使用した場合も試したのですが、同じ状態になりました。コンソールで、ユーザーネームを出したところ、リロード前だとnullなのですが、リロードをするとユーザー名が入っていました。私の考えとしては、ユーザーネームがfirebaseに登録される前に、画面遷移をしてしまっているからだと考えているのですが、どのように書けば良いのかわからなかったです。ご教授お願いします
現在のコードは、

javascript
1store.js
2
3
4    registerUser({ commit }, userInfo) {
5      firebase
6        .auth()
7        .createUserWithEmailAndPassword(userInfo.email, userInfo.password)
8        .then((response) => {
9          response.user.updateProfile({
10            displayName: userInfo.userName,
11          });
12          const user = firebase.auth().currentUser;
13          commit('setEmail', user.email);
14          commit('setPassword', user.password);
15          commit('setUsername', user.userName);
16          router.push('/Home');
17        })
18        .catch((e) => {
19          console.log(e);
20        });
21    },
22

vue
1Home.vue
2
3
4<template>
5  <div class="Home">
6    <div>
7      <p class="userName">{{ userName }}さんようこそ!!</p>
8      <p class="money">残高{{ wallet }}</p>
9    </div>
10    <h1>ユーザ一覧</h1>
11    <p>ユーザ名</p>
12  </div>
13</template>
14
15<script>
16import firebase from '../plugin/firebase.js';
17export default {
18  data() {
19    return {
20      userName: '',
21      wallet: 1000,
22    };
23  },
24  created() {
25    firebase.auth().onAuthStateChanged((user) => {
26      if (user) {
27        this.userName = user.displayName;
28      }
29      console.log(this.userName);
30    });
31  },
32};
33</script>
34