[2520] Computed property not updated when state updated.

Hi

I took enough time searching for a solution for this issue. but with no luck. I read many article/blogs/issues but still cannot resolve my issue. Maybe I don't get it right. I need your help.

Inside user profile page there is avatar component which have computed property named 'avatar ' should hold user avatar path. This property is mapped to Vuex store getter. Whenever the state change (avatar changed/updated by user) property should reflect that change.

On the other hand. i'm using 'js-cookie' to handle user data/token. Once user login the cookie is set with user data/token information which include user avatar path. If user revisit website after for example two days. Application will extract data from cookies.

Now the issue happen when i retrive data from cookie. the avatar computed property never updated.

layout/default.vue

if(Cookies.get('wd_cookie') != undefined){
      let user = JSON.parse(Cookies.get('wd_cookie'));
      this.$store.commit('logUserIn', user);
    }

store/index.js

export const mutations = {
logUserIn(state, user){
      state.userLoggedIn = true;
      Vue.set(state, 'user', {
        id: user.id,
        email: user.email,
        name: user.name,
        avatar: user.avatar,
      });
}
}

export const getters = {
  userAvatar: state => {
    if(state.user.avatar != null){
      return state.user.avatar;
    }
    return '/avatar-placeholder.png';
  }
}

my component avatar.vue

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

Any help please