nuxtで、ページ遷移時にセットしたstateを表示したい

トップページにアクセスした際、会員情報をstateにセットし、そのstateの情報を表示したいのですが、表示されません。
stateに会員情報は格納されるため、一度違うページに行って、再度トップに戻った時は表示されます。
しかし、初回トップページにアクセスした際は表示されません。以下コードです。

pages/index.vue

<template>
    <v-layout column justify-center align-center>
            <login />
            <nuxt-link to="/myPage">マイページ</nuxt-link>
    </v-layout>
</template>

<script>
import Logo from "~/components/Logo.vue";
import VuetifyLogo from "~/components/VuetifyLogo.vue";
import { mapActions, mapState, mapGetters } from "vuex";
import Login from "~/components/Login.vue";

export default {
    computed: {
        ...mapState('user', ['user']),
    },
    methods: {
    },
    components: {
        Logo,
        VuetifyLogo,
        Login
    },
    name: "TopPage",
    data() {
        return {
            token: null,
            cheerBalance: null,
            account: null
        };
    },
};
</script>

Components/Login.vue

<template>
    <section class="section">
        <v-card>
            <v-card-title class="headline">
                <v-btn @click="login">ログイン</v-btn>
            </v-card-title>
            <v-card-text>
                <p>displayName, {{ user.displayName }}！</p>
            </v-card-text>
        </v-card>
    </section>
</template>

<script>
import firebase from "@/plugins/firebase";
import { mapActions, mapState, mapGetters } from "vuex";

export default {
    computed: {
        ...mapState("user", ["user"]),
    },
    created: async function() {        
        await this.checkIsAuth()        
    },
    methods: {
        ...mapActions({
            checkIsAuth: "user/checkIsAuth",
        })
    }
};
</script>

store/user.js

import firebase from "@/plugins/firebase";

export const strict = false

export const state = () => ({
    user: {},
})

export const mutations = {
    setDisplayName(state, payload) {
        state.user.displayName = payload
    },
}

export const actions = {
    async checkIsAuth({ commit }, payload) {        
        await firebase.auth().onAuthStateChanged(user => {
            if (user) {
                commit('setDisplayName', user.displayName)
            } 
        }); 
    },
}

export const getters = {
    user( state ) {
        return state.user
    }
}