Tengo un objeto en vuex que estoy recibiendo en la página por captadores, pero vue solo ve la primera actualización del objeto. Recojo el objeto paso a paso, así que primero está vacío, luego confirmo que actualiza el estado de vuex (setUser) y vue muestra esta nueva información en la página. Pero luego uso una confirmación más (addInfo) y funciona. Puedo ver información actualizada usando Vue DevTools, pero no puedo usarla en la página que muestra el segundo estado.

 async fetchUser({ commit, state }) { return new Promise(() => { axiosInstance .get(User(), { headers: { Authorization: 'Token ' + localStorage.getItem('token'), }, }) .then((res) => { commit('setUser', res.data); }) .then(() => { axiosInstance.get(UserID(state.userInfo.pk)).then((res) => { axiosInstance.get(res.data.profile).then((res) => { commit('addInfo', res.data); console.log(state.userInfo); }); }); }) .catch((err) => { console.log(err); }); }); }

Objeto llamado userInfo estoy entrando en la página por

 computed: { ...mapGetters(['userInfo']), }, created() { this.$store.dispatch('fetchUser'); }

esto es lo que me sale en la pagina

Así es como se ve realmente el objeto