Child component not getting updated

[karneaud]

So I have a parent component

{
data() { return {store: { userId: null }} }
}

and I have a child component

{
store:['userId'], data { return { id: function(){ return this.$store.userId }}}, watch { id: function(){ console.log(this.id) } }
}

But

watch does not fire

I need to keep a piece of data for parent-child not globally. Do I still need to have a store.js?

[cklmercer]

Your store object has to be in your root component's data option.

If it doesn't need to be global and you are trying to pass data from parent to child then a regular prop might be a better option.

[karneaud]

If a regular prop might be better why do I get

vue.js?3de6:2611 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "userId"

[cklmercer]

Sorry, I wasn't aware that you were trying to mutate the prop. So, in this situation there's two viable options that come to mind.

The first option would be to simply move the data that needs to be shared to the store object in your root VM.

The other option would be to use a global event bus to keep the data in sync. You can checkout plugin vue-events, but you can also easily do this yourself.

I believe Evan mentions this issue in the VueJS docs.

[karneaud]

Ended up using props with computed values. Vue 2.0 has gotten confusing since I last used it