In a nuxt component with a div and button, I want to show only one of them depending on the user state (Login and Logout).

When I Login the signout button shows up and the login is hidden as wanted.

The problem is when I logout the signout button is hidden but the login button doesn't show.

What's strange to me is when i log the isUserLoggedIn property, it gives me the correct value between true/false on the client, but it's always returning false in the terminal and Nuxt SSR in the browser.

I use @nuxtjs/firebase module to handle the auth and this is the config

 firebase: {
    config: {
      // My config
    },
    services: {
      auth: {
        persistence: "local",
        initialize: {
          onAuthStateChangedAction: "onAuthStateChanged",
          subscribeManually: false,
        },
        ssr: false,
      },
    },
  },

My Login.vue component:

<template>
  <div>
    <div v-show="!isUserLoggedIn" id="firebase-auth-google"></div>

    <button
      @click="logout"
      v-show="isUserLoggedIn"
      class="flex px-4 py-2 text-white bg-red-600"
    >
      Logout
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    isUserLoggedIn() {
      console.log("Login page", this.$store.getters["isLoggedIn"]);
      return this.$store.getters["isLoggedIn"];
    },
  },

  methods: {
    async logout() {
      await this.$firebaseAuth.signOut();
    },
  },

  mounted() {
    this.$firebaseAuth.renderGoogleLogin("firebase-auth-google");
  },
};
</script>