Computed value changed, template is not rerendered unless page refreshed

I have a button which is shown whenever some computed value is not located in local storage. Unfortunately the button is not being shown or hidden when the value is deleted or set in local storage unless I refresh the page.

<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 = '';
        }
    }
}