Newbie Question: Changing main vue q-drawer from other views

[leroy_hack]

I am building my first quasar app. I am starting with the basic build. On MainLayout.vue there is a q-drawer that acts as global menu that appears on all other views. I want to give the user different menu options if they are logged in or a guest. What is the best way to do this?

My idea was to create two lists. If the user wasn’t logged in show list1, loggedin show list2.

I created to 2 lists with components and used v-if to determine if shown. This concept works.

<q-list v-if="ConfigVal.isLoggedIn == true" >

If I set the value in the data area, the menus work.

I thought that since I want to access the loggedin status from multiple vues I should use a global variable to store that info. I have a configuration file that stores the globalvariable - isLoggedIn and I import that file into the MainLayout.vue.

this is where I start to have problems.

1. I get an error that it is unable to get property ConfigVal.isLoggedIn but I can get the value in the data section of MainLayout.vue so I know the import works. (I’ve tried setting a local value of loggedin to the global - the error goes away but nothing happens if I change the global value)
2. If I change the value of isLoggedIn on another vue, nothing happens on the mainlayout.vue.

There must be some naming/reference convention that I don’t understand yet.
In the quasar/vue world how do I do this?

Thanks for your help

I’ve also tried to no avail. (If the DOM refreshes because of change/save in the code, it updates, but that is it)

 computed: {
    curLogIn: function () {
      return ConfigVal.isLoggedIn;
    }
  },
  watch:{
    curLogIn: function(oldLog,newLog){
      console.log("saw change");
      curLogIn = Configval.isLoggedIn;
    }

[QuaSam]

You may find this helpful:
https://forum.quasar-framework.org/topic/6088/globally-hide-or-show-left-drawer-on-mainlayout-page
Globally Hide or Show Left Drawer on MainLayout Page