Vuejs. Update data() on update-CodePudding

I'm trying to check if there is an authenticated user in order to render the sidebar and the header. If it's not authenticated the sidebar and header don't get rendered in order to display just the Login or Register. But my this.auth data is not getting updated until I reload the page. I understand that probably there is a feature on vuejs that will update this variable more often? ( My sidebar contains the router-links to load the rest of my components but this.auth does not get updated when I click on a router-link )

EDITED: Using a computed property solved it.

<template>
    <v-app>
        <header-component v-if="auth" />
        <sidebar-component v-if="auth" />
        <router-view></router-view>
    </v-app>
</template>
<script>
import Sidebar from "./components/Sidebar"
import Header from "./components/Header"
    export default{
        name: 'App',
        components: {
            'sidebar-component': Sidebar,
            'header-component': Header,
        },
        computed: {
            auth ()
            {
                return (!localStorage.getItem("auth")) ? false : true
            }
        }
    }
</script>

CodePudding user response：

You can delete your auth declare in the data, and use the computed like this:

computed {auth (){return (!localStorage.getItem("auth")) ? false : true}}