Computed from $store deos not update apon the $store internal state change


Quite a number of similar topics on this, but after reading through a bunch of them I still can’t figure it out it seems.

I’ve recreated (obviously a simplified version) part of the project on CodePen to make it easier:

The problem is - when trying to change state’s values the calculated properties are not changing.

I’ve trying using Vue.set(), or something like this this.$store.state = Object.assign({}, data1, data2), but it seems this is not where the problem lies. Maybe it’s the way the Store object is used as a plugin?

Any comments?


hello after reading your code i see that you’re updating store state directly from components, you should do that trough actions and mutations, also i find that your code is very complicated to do simple things maybe it’s due to a misunderstanding from my part.



I do have setters\getter on store and the codebase is much more complicated, obviously. I tried to simplify it to be able to post only the part that needs explanation.


You’re not using Vuex, you are using a plain Javascript object as your store.Since that plain object is not part of any Vue instance’s data, it’s not reactive, so computed props can’t react to it.

You can make it reactive with Vue.observable() (requires Vue 2.6):


Thanks, Linus, that’s what I’ve been missing, thinking that Vue will just do some magic for me :slight_smile: