计算值已更改，除非刷新页面，否则不会重新呈现模板

Question

我有一个按钮，只要本地存储中不存在某些计算值，就会显示该按钮。不幸的是，除非我刷新页面，否则在删除或设置本地存储中的值时按钮不会显示或隐藏。

<template>
<v-card>
    <v-text-field v-model="token" v-if="!savedLogin"></v-text-field>
    <v-btn v-if="!savedLogin" @click="loadClientsPage">Login</v-btn> <template v-show="savedLogin"><v-btn >Continue</v-btn></template> <v-btn v-if="savedLogin" @click="clearToken">clear login</v-btn>
</v-card>

<script>
export default {
    name: "Login",
    data(){
        return {
            token:'',
        }
    },
    computed:{
        savedLogin:{
            get(){
            return localStorage.getItem('token') !== null
            },
            set(tokenValue){
                if(tokenValue ==='')
                    return localStorage.removeItem('token');

            return localStorage.setItem('token', tokenValue);
            }
            }
    },
    methods:{
        loadClientsPage(){
            this.savedLogin = this.token;
            this.$forceUpdate();
        },
        clearToken(){
            this.savedLogin = '';
        }
    }
}