I have a component that has an icon that I want to show only if the method from getters returns true. That method returns true when a user logged in. I am using a computed property to track the changes but I have to reload the page so that computed method can be updated.

<template>
  <div class="icon" v-if="isUserLoged" >
     <i class="fa fa-star"></i>
  </div>
</template>

<script>
export default {
  computed: {
    isUserLoged() {
      return this.$store.getters.isUserLoged;
    },
  },
};
</script>

getters:{
  isUserLoged(state){
   return state.auth_token !== null
  },
}

actions:{
    login({commit},payload){
      return axios.post("/users/login",payload)
      .then(data => {
        commit('SET_TOKEN',data.data.auth_token)  
      })
      .catch(error => {
        return error.response
      })
    },
},
mutations:{
  SET_TOKEN(state,data){
      state.auth_token = data
    },
}

Token is set when login api is called on actions section