After some careful observation, I am perplexed by the reactivity behavior I have encountered. Initially, I had buttons on a navbar that were displayed conditionally in the app component (App.vue):
<button
type="button"
v-if="loggedIn()"
@click="logout"
class="btn btn-outline-light"
>
accompanied by the following script:
methods: {
loggedIn() {
return !(auth.getUser() == null);
},
Everything was functioning correctly, and the logout button would appear once a user logged in. However, I recently decided to overhaul the design and transition to a sidebar layout. I created a sidebar component (SideBar.vue) with identical HTML and script. Strangely, the button stopped responding to changes. The only variation is that the navbar is present in App.vue while SideBar is a component of App structured like this :
<template>
<div id="app">
<div id="nav">
<nav class="navbar navbar-expand-lg navbar-light ">
// elements for the navbar with reactive buttons
</nav>
<side-bar />
</div>
<main>
<router-view />
</main>
</div>
</template>
Modifications have been attempted, including using a computed property within the component but to no avail. I managed to make it function by passing a property from the app to the sidebar component, although I am not fond of this solution as scalability may become an issue later on. Any suggestions or ideas would be greatly appreciated. Thank you in advance.