Snippet: https://jsfiddle.net/mjvu6bn7/
I have a watcher implemented on a computed property in my Vue component. This computed property depends on a Vuex store variable that is set asynchronously. Despite trying to update the data variable of the Vue component when this computed property changes, it does not seem to be working as expected.
Below is the code for the Vue component:
new Vue({
el: '#app',
store,
data : {
myVar : ""
},
beforeMount() {
this.$store.dispatch('FETCH_PETS', {
}).then(() => {
console.log("fetched pets")
})
},
computed:{
pets(){
return this.$store.state.pets;
}
},
watch:{
pets: (pets) => {
console.log("Inside watcher");
this.myVar = "Hey";
}
}
});
Below is the Vuex store configuration:
const state = {
pets: []
};
const mutations = {
SET_PETS (state, response) {
console.log("SET_PETS");
state.pets = response;
}
};
const actions = {
FETCH_PETS: (state) => {
setTimeout(function() {
state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi']);
}, 1000);
}
}
const store = new Vuex.Store({
state,
mutations,
actions
});
Here is a fiddle created for this issue. Even though the watcher is triggered when pets are loaded, the myVar data variable is not being updated as expected.