Tengo un proyecto que usa Laravel Tenancy en Backend. En frente usando Vue tengo este código

 <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>

Cuando hago un inicio de sesión necesito mostrar un menú específico, en este caso

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

cuando hago un inicio de sesión, almaceno el arrendamiento en un almacenamiento local, lo llamo desde mi configuración

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

Ahora, si localStorage.getItem('tenancy') , quiero mostrar solo el <auth-navigation-tenant v-if="tenant"/>