Vue，Firebase 画面にユーザー名表示させたい

前提・実現したいこと

vueとfirebaseを使って投げ銭アプリを作成しています。
参考動画
このように登録画面からユーザ名を入力してダッシュボードに入力したユーザ名を表示できるようにしたい

発生している問題・エラーメッセージ

新規登録・ログイン機能までは実装できたのですが、登録したユーザー名を表示させることができませんでした。

該当のソースコード

HOME.vue 新規登録機能

<template>
  <div>
    <h1 class="title">新規登録画面</h1>
    <form>
      <ul>
        <li class="user-name">
          <label for="user-name">ユーザ名</label>
          <input type="text" id="user-name" placeholder="UserName" v-model="username" />
        </li>
        <li class="email">
          <label for="email">メールアドレス</label>
          <input type="email" id="email" placeholder="E-mail" v-model="email" />
        </li>
        <li class="password">
          <label for="password">パスワード</label>
          <input type="password" id="password" placeholder="PassWord" v-model="password" />
        </li>
      </ul>
    </form>
    <button class="button is-info is-outlined" @click="newRegister">新規登録</button>
    <br />
    <router-link to="/login">ログインはこちらから</router-link>
  </div>
</template>
<script>
//import firebase from 'firebase';
export default {
  name: 'Register',
  data() {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    newRegister() {
      this.$store.dispatch('newRegister', {
        username: this.username,
        email: this.email,
        password: this.password,
      })
    },
  }
};
</script>

<template>
  <div>
    <h1 class="title">ログイン画面</h1>
    <form>
      <ul>
        <li>
          <label for="email">メールアドレス</label>
          <input type="email" id="email" placeholder="E-mail" v-model="loginEmail" />
        </li>
        <li>
          <label for="password">パスワード</label>
          <input type="password" id="password" placeholder="PassWord" v-model="loginPassword" />
        </li>
      </ul>
    </form>
    <button class="button is-info is-outlined" @click="loginUser">ログイン</button>
    <br />
    <router-link to="/">新規登録はこちらから</router-link> 
  </div>
</template>
<script>
export default {
  name: 'singin',
  data() {
    return {
      loginEmail: '',
      loginPassword: ''
    };
  },
  methods: {
    loginUser() {
      this.$store.dispatch('loginUser', {
        loginEmail: this.loginEmail, 
        loginPassword: this.loginPassword
      })
    }
  }
};
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: '',
    email: '',
    password: '',
    loginEmail: '',
    loginPassword: ''
  },
  mutations: {
    registerState(state, payload) {
      state.username = payload.username
      state.email = payload.email
      state.password = payload.password
    },
    loginState(state, payload) {
      state.loginEmail = payload.loginEmail
      state.loginPassword = payload.loginPassword
    }
  },
  actions: {
    newRegister(context, payload) {
      firebase
      .auth()
      .createUserWithEmailAndPassword(payload.email, payload.password)
      .then(() => {
        context.commit('registerState', payload)
      })
      .then(() => {
        router.push('/about')
      })
      .catch((e) => {
        console.error('エラー :', e.message)
      })
    },
    loginUser(context, payload) {
      firebase
      .auth()
      .signInWithEmailAndPassword(payload.loginEmail, payload.loginPassword)
      .then(() => {
        context.commit('loginState', payload)
      })
      .then(() => {
        alert("ログイン成功!");
        router.push('/about');
      })
      .catch((e) => {
        console.error('エラー :', e.message)
      })
    }
  },
  modules: {
  }
})

ダッシュボード　about.vue


<template>
  <div class="Home">
    <div>
      <p class="userName">{{ userName }}さんようこそ!!</p>
    </div>
    <h1>ユーザ一覧</h1>
    <p>ユーザ名</p>
  </div>
</template>

試したこと

ユーザー名をFirebaseへ格納した後、非同期処理でstoreへ渡し、ログイン後画面へ遷移するためsetTimeout()
を使ってsetTimeout(() => { this.$store.dispatch('loginUser', result.user) this.$router.push('/home'); }, 1000)
と記述してみたりgettersでgetUserName: state => state.user.displayName mutationでupdataUser(state, userInformation) { state.user = userInformation; }actionでupdataUser(context, userInfomation) { context.commit('updataUser', userInfomation) }と記述して他の人のコード参考にしてみたりしたのですが、またcomputed:{ name(){ return this.$store.state.user.name; } },と記入してみましたが空白のまま何も表示できませんヒントだけでも構いませんのでお力を貸していただけると幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

created () {
  firebase.auth().onAuthStateChanged((user)=> {
    if (user) {
      this.userName = user.displayName
    }
  });
},
  mounted() {
    this.userName = this.getUserName
  }
};

一応今のダッシュボードのコードです