Trying to refresh a component in Vue 3 and laravel 9 without refreshing the page

Question

I have been trying to find a way of refreshing a header component when pressing the logout button, so that the login and register will show up, without actually refreshing the whole page . If any one knows any effective way of doing that It would be much appreciated. I have a loggedIn state that changes based on the local storage token presence.

<template>
    <header id="header" class="d-flex align-items-center">
        <div
            class="container d-flex align-items-center justify-content-between"
        >
            <h1 class="logo">
                <router-link to="/home"> CatchA<span>Ride</span> </router-link>
            </h1>
            <nav id="navbar" class="navbar">
                <ul>
                    <li>
                        <router-link class="nav-link" to="/home"
                            >Home
                        </router-link>
                    </li>
                    <li>
                        <router-link class="nav-link" to="/prices"
                            >Prices
                        </router-link>
                    </li>
                    <li>
                        <router-link class="nav-link" to="/team"
                            >Team
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link class="nav-link" to="/login"
                            >Login
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link class="nav-link" to="/register"
                            >Register
                        </router-link>
                    </li>
                    <li v-if="hasToken">
                        <router-link to="/" @click="logOut" class="nav-link">
                            Logout
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</template>

<script>
export default {
    data() {
        return {
            loggedIn: false,
        };
    },
    computed: {
        hasToken() {
            const storeToken = localStorage.getItem("token");
            if (storeToken) {
                return true;
            }
            false;
        },
    },
    methods: {
        logOut() {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            localStorage.removeItem("id");
            this.$forceUpdate();
        },
    },
};
</script>

Answer 1

The problem is that computed properties will only update automatically if their dependant values are reactive. Basically Vue has no way of knowing when the values in localStorage have updated. There are libraries that will make this possible. However, without the use of such:

• In your template change

  v-if="!hasToken" to v-if="!loggedIn"

• modify your script

  export default {
      data() {
          return {
              loggedIn: !!localStorage.getItem("token");
          };
      },
      methods: {
          logOut() {
              localStorage.removeItem("token");
              localStorage.removeItem("user");
              localStorage.removeItem("id");
              this.loggedIn = false;
          },
      },
  };