组件仅在页面重新加载时隐藏（vue js）

Question

晚上好。通过用户授权，两个组件应该隐藏在标题中而无需重新启动（通过 axios）。但他们只在重启时隐藏。注销操作发生同样的事情。我该怎么做才能得到必要的结果？

header.vue

<template>
            <li v-if="!user.name" class="nav-item">
                <router-link to="/login"><b>Login</b></router-link>
            </li>
            <hr />
            <li v-if="!user.name" class="nav-item">
                <router-link to="/signup"><b>Registration</b></router-link>
            </li>
</template>

<script>
...
    computed: {
        token() {
            return this.token = localStorage.getItem('token')
        }
    },
    mounted(){
    const self = this;
    window.axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`
    axios.get('/api/user').then(function (response) {
        self.user = response.data

        })
        .catch(function (error) {
            console.log(error);
        })
    },

    methods: {
        logout()
        {
            axios.post('/api/logout').then(() => {
                localStorage.removeItem('token')
                this.$router.push('/login')
            }).catch((errors) => {
                console.log(errors)
            })
        }
    }
}
</script>

登录.vue

<template>
...
</template>

...
    methods: {
        loginUser(){
            const self = this;
            axios.post('/api/login', this.form).then((response) => {
                localStorage.setItem('token', response.data)
                console.log('logged');
                self.$router.push({ name: "CV"});
            }).catch((error)=>{
                self.validate = error.response.data.errors;
            })
        }
    }

}
</script>