Categories
javascript vue.js vuejs2 vuex

data variable not being updated from watcher on computed property in Vue.js with Vuex

Fiddle: https://jsfiddle.net/mjvu6bn7/

I have a watcher on a computed property, which has a dependency on Vuex store variable, which is being set asynchronously. I am trying to set data variable of Vue component, when this computed property is changing, but this is not happening.

Here is 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"
}
}
});

Here is Vuex store:

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 fiddle created for this. As you can see, myVar is not being updated, however watcher gets called when pets get loaded.