Vue: header doesn't get renewed after login/logout but localStorage is changed

Question

When I login using a form this happens:

1. loggedIn value in localStorage is changed to "true"
2. Router pushes to /home
3. Header doesn't change and still shows Login/Signup buttons

I need it to be

1. loggedIn value in localStorage is changed to "true"
2. Router pushes to /home
3. Header changes and a picture

Header.vue:

      <div class="flex flex-wrap items-center justify-end ">
        <HeaderItem v-if="!isLoggedIn"
            class="pl-10" text = "Login" link="/login"/>
        <HeaderItem v-if="!isLoggedIn" class="pl-10"
                    text = "Signup" link="/signup"/>

        <div v-if="isLoggedIn">
          <UserHeader/>
        </div>
      </div>

export default {
  name: 'App',
  components: {HeaderItem, UserHeader},
  data() {
    return {
      homeLink: "/home"
    }
  },
  created: {
    isLoggedIn() {
      console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");

      if (localStorage.getItem("loggedIn") === "true")  {
        console.log("STORAGE LOGGED IN TRUE");
      }
      else  {
        console.log("STORAGE LOGGED IN FALSE");
      }

      return localStorage.getItem("loggedIn") === "true";
    }
  }
}

It only prints the correct message and changes header after I press Ctrl+Shift+R. But the localStorage has the correct loggedIn value right away. How do I fix it?

EDIT:

I also tried this:

  <div class="flex flex-wrap items-center justify-end ">
        <HeaderItem v-if="!loggedIn"
            class="pl-10" text = "Login" link="/login"/>
        <HeaderItem v-if="!loggedIn" class="pl-10"
                    text = "Signup" link="/signup"/>

        <div v-if="loggedIn">
          <UserHeader/>
        </div>
      </div>

export default {
  name: 'App',
  components: {HeaderItem, UserHeader},
  data() {
    return {
      homeLink: "/home",
     // loggedIn: false
    }
  },
  computed: {
    loggedIn() {
      return localStorage.getItem("loggedIn") === "true";
    },
...

It has the same results: the header only changes after the page refresh (Ctrl+Shift+R).

Answer 1

The created is a lifecycle or hook of vue.js, inside it whatever functions/methods you define, is not available to run.

As in your case, you want to use as a variable, then use computed property.

Here is the fix version of your code:

computed: {
      isLoggedIn() {
        console.log(JSON.parse(localStorage.getItem("loggedIn")) === "true");

        if (localStorage.getItem("loggedIn") === "true")  {
          console.log("STORAGE LOGGED IN TRUE");
        }
        else  {
          console.log("STORAGE LOGGED IN FALSE");
        }

        return localStorage.getItem("loggedIn") === "true";
      }
    },

Updated:

If you want your functions to be reactive on the same component, then create a variable and set its value where you set the localStorage loggedIn value.

This is just an example code:

<template>
  <div class="flex flex-wrap items-center justify-end ">
    <h3>{{ isLoggedIn }}</h3>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loggedIn: false
      }
    },
    created () {
      // added 3 seconds gap to make the value true and check reactivity
      setTimeout(() => this.onSignIn(), 3000)
    },
    computed: {
      
      isLoggedIn() {
        if (localStorage.getItem('loggedIn')) return localStorage.getItem("loggedIn") === "true";
        return this.loggedIn
      }
    },
    methods: {
      onSignIn () {
        this.loggedIn = true
        localStorage.setItem('loggedIn', true)
      }
    }
  }
</script>

Update 2 as per your situation:

After understanding your situation, here is the code, that will help you. I used the Bus Event in order to communicate between the component which might be far on the parent to access, such as App.vue.

event-bus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

LoginForm.vue

<template>
  <div class="home-page">
    <button type="submit" @click="onSignIn()">Login</button>
  </div>
</template>

<script>
import EventBus from '../event-bus';
  export default {
    methods: {
      onSignIn () {
        localStorage.setItem('loggedIn', true)
        EventBus.$emit('OnLogin', true)
      }
    }
  }
</script>

App.vue

<template>
  <div id="app">
    <Header :userLoggedIn="isLoggedIn"/>
    <router-view/>
  </div>
</template>
<script>
import Header from './components/Header'
import EventBus from './event-bus';
export default {
  components: {
    Header
  },
  data() {
    return {
      isLoggedIn: false
    }
  },
  created () {
    EventBus.$on('OnLogin', (isLogin) => {
      this.isLoggedIn = isLogin
    })
  }
}
</script>

Header.vue

<template>
  <div>
    <h2>{{ userLoggedIn }}</h2>
  </div>
</template>

<script>
  export default {
    props: ['userLoggedIn']
  }
</script>