ログインした時にユーザー名が表示されるようにしたい。

前提・実現したいこと

VueCLiとFirebaseを利用して簡易的な投げ銭アプリを作成しています。

新規登録時にユーザー名、メールアドレス、パスワードを入力して新規登録をします。
実現したいことは、ログインした際に登録したユーザー名をダッシュボードに表示させることです。

現在の状況は上のような感じです。
新規登録した後、ログイン後の画面に遷移するようにしています。
その時にユーザー名が表示されるようにしたいです。

該当のソースコード

vue
1<template>
2  <div>
3    <div class="login-message-area">
4      <div>
5        <span>{{ userName }}さんようこそ！！</span>
6      </div>
7
8      <div>
9        <span>残高 : 1000</span>
10        <button>ログアウト</button>
11      </div>
12    </div>
13
14    <h1>ユーザ一覧</h1>
15
16    <div class="user-list-wrapper">
17      <h4>ユーザ名</h4>
18
19      <ul class="user-list">
20        <li>
21          <span>TEST</span>
22          <form>
23            <button>walletを見る</button>
24            <button>送る</button>
25          </form>
26        </li>
27        <li>
28          <span>TEST</span>
29          <form>
30            <button>walletを見る</button>
31            <button>送る</button>
32          </form>
33        </li>
34        <li>
35          <span>TEST</span>
36          <form>
37            <button>walletを見る</button>
38            <button>送る</button>
39          </form>
40        </li>
41      </ul>
42    </div>
43  </div>
44</template>
45
46<script>
47import firebase from 'firebase';
48
49export default {
50  data() {
51    return {
52      userName: ''
53    };
54  },
55  mounted() {
56    firebase.auth().onAuthStateChanged(user => {
57      this.userName = user.displayName;
58      console.log(user);
59      console.log(this.userName);
60    });
61  }
62};
63</script>

上記のコードで試してみました。

現在起きている現象は以下の通りです。

①新規登録し画面遷移をした時にconsole.log(this.userName）でコンソールを確認したところnullと表示される。
onAuthStateChangedで取得した値userをコンソールで確認したところ登録時のユーザー名が格納されていることは確認できた。
②画面リロードした時にはユーザー名が表示される。

vuexを使って実装した方がイイのでしょうか？
解決できそうな記事が見当たらずこちらで質問させていただきました。

お力添えいただけると幸いです。
よろしくお願いします。