vue-ionicons | ️ Vue Icon Set Components from Ionic Team | Icon library

In my app I have a registred area, when you login successfully a global variable "auth" will take the value loggedin, in my main vue component App.vue I load the header component which include the navbar and the router view I call the created function in the header component to read the value of "auth" to show the login link and hide the profile,chat and logout links I also want to use the sema method in some router views (char and profile) to prevent the user to get acces to them and push the router to the login page when the "auth" variable is not loggedin. In that case, the App.vue have to run the created function twice, the header component reads correctly the value of "auth" while the router view does not. Is there any solution to do that? or any alternative to prevent the access to the registred area without login ?

update

I have tried vuex and I got this error (Cannot read property 'commit' of undefined) and the store.state.auth still have the value of false

this is my login component