Observation method in vuejs 2 does not update isAuth value

Hey i am new to vuejs. I was trying to create an authentication for the base site. What I have done so far is that the user can register and login and the views are displayed to him accordingly, but the only problem I get is when the user gets authenticated with the isAuth variable which I added to hide and show navigation bar. updated even if I put it as a clock. When I click update it works fine then. I tried using vuex too. It doesn't seem to work. Currenlty I am using the built-in custom authentication package that returns a token.

I am using Vuejs 2 and Laravel 5.4:

This is my authentication package:

export default function (Vue){
Vue.auth = {
    // set token
    setToken (token , expires_in){
    localStorage.setItem('token' , token);
    localStorage.setItem('expires_in' , expires_in)
    },
    // get token
    getToken (){
        var token = localStorage.getItem('token')
        var expires_in = localStorage.getItem('expires_in')
        if( ! token || ! expires_in)
        {
            return null ;
        }
        if(Date.now() > parseInt(expires_in)){
            this.destroyToken();
            return null;
        }
        return token;
    },

    // destroy token
    destroyToken (){
        console.log('destroyToken');
    localStorage.removeItem('token');
    localStorage.removeItem('expires_in')
    },

    // isAuthenticated
    isAuthenticated (){
    return this.getToken()
    }
};

Object.defineProperties(Vue.prototype , {
        $auth : {
    get(){
        return Vue.auth
    }
}
})
}

      

        
        
        
      

    

This is the vue vue script:

   <script type="text/babel">

export default{
    data() {
        return {
            loginForm: {
                email: '',
                password: ''
            },
            forgotForm :{
                email : ''
            },
            toggleForms: false,

        }
    },
    created(){
    console.log(this.$store.state);
    },
    methods: {
        login (loginForm){
            let self = this ;
            var data = {
                client_id : 2,
                client_secret : '8WCDtW3wKeeNUBgwHviFoX7JmaVPU0HjFto9kwqv',
                grant_type     : 'password',
                username : loginForm.email,
                password : loginForm.password
            };
            console.log(this.$store.state);
            axios.post('/oauth/token', data)
                .then((response) =>{

                    self.$auth.setToken(response.data.access_token , response.data.expires_in+ Date.now());
                console.log(response.data.expires_in);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

        forgotPassword: function () {
            axios.post('/password', this.forgotForm).then(function (response) {
                console.log(response);
            }).catch(function (error) {
               console.log(error);
            });
        },

        hideShowForms: function () {
            this.toggleForms = !this.toggleForms;
        }
    }
}

      

        
        
        
      

    

And this is the actual place where I use the clock to hide the navigation:

<template>
    <div>
        <guest-main v-show="!isAuth"></guest-main>

        <auth-main v-show="isAuth"></auth-main>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                isAuth : this.$auth.getToken()
            }
        },
        watch: {
            $route () {
                if (!this.$auth.getToken()) {
                    this.isAuth = false;

                    console.log("here");
                } else {

                    console.log(this.isAuth);
                    this.isAuth = true;

                }
            }
        }
    }
</script>