Javascript 如何在firebase身份验证更改上更改Vue组件？

我的Vue导航栏有一部分有一个登录或注销按钮。我希望它根据firebase用户是否登录而改变

它确实有效，但只有在我登录后刷新页面时才有效。我尝试将.onAuthStateChanged（）放入更新的（）生命周期挂钩中，但仍然存在相同的问题

我该怎么做

    <div>
      <span v-if="loggedIn">
        <router-link to="/logout">
          <v-btn depressed v-on:click="pressed">Logout</v-btn>
        </router-link>
       </span>
       <span v-else>
         <router-link to="/login">
           <v-btn depressed>Login</v-btn>
          </router-link>
        </span>
     </div>


export default {
 mounted() {
    firebase.auth().onAuthStateChanged(user=> {
        if(user){
            this.loggedIn = true;
        } else {
            this.loggedIn = false;
        }
    })
 },

注销
登录
导出默认值{
安装的（）{
firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.loggedIn=true；
}否则{
this.loggedIn=false；
}
})
},

尝试将loggedIn作为计算属性您在哪里定义

loggedIn

？它在下一个代码块的data（）{return{loggedIn:false}中定义。