I have a project using Laravel Tenancy in Backend. In front using Vue i have this code

<template>
  <div>
    <guest-navigation v-if="!$store.state.auth.token" />
  </div>
  <div id="demo">
    <div v-if="$store.state.auth.token" class="h-screen flex">
      <div class="flex-1 min-w-0 bg-gray-200">
        <div class="sticky top-2">
          <auth-navigation />
        </div>
        <div class="sticky top-2">
          <auth-navigation-tenant v-if="tenant"/>           
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GuestNavigation from "./components/Navigations/GuestNavigation";
import AuthNavigation from "./components/Navigations/AuthNavigation";
import AuthNavigationTenant from "./components/Tenancy/Navigations/AuthNavigation.vue";
import { ref, watch } from "vue";

export default {
  components: { AuthNavigation, GuestNavigation, AuthNavigationTenant },
  
  setup() {
    const tenant = localStorage.getItem('tenancy');
    const newTheme = ref("");
    const Demo = {
      data() {
        return {
          show: true,
        };
      },
    };
    watch({
      theme(newTheme) {
        newTheme === "light"
          ? document.querySelector("html").classList.remove("dark")
          : document.querySelector("html").classList.add("dark");
      },
    });
    return { 
      newTheme, 
      Demo,
      tenant,
    };
  },
};
</script>

When i make a login need show an especific menu, in this case

<div class="sticky top-2">
  <auth-navigation-tenant v-if="tenant"/>           
</div>

when i make a login, i store the tenancy in a localstorage, I call it from my setup

const tenant = localStorage.getItem('tenancy');

Now if the localStorage.getItem('tenancy') exist i want show only the <auth-navigation-tenant v-if="tenant"/>