Update the calculated properties of a parent component after the child component modifies the prop data

Question

I need to make a relatively complex API request object, in which there are a large number of UI components responsible for updating different properties of the object.

I pass the basic request model as a prop from the parent component to its child components, and the child components pass it to their components (generations).

At the parent level, I have a computed property that returns a field of this data model, and a watch for that computed property.

When the child component updates a property on the model, it successfully updates everywhere that references it, but the computed property on the parent component cannot be recalculated, so the watch never activates.

I guess I've missed a point here, but I can't imagine how to update without resorting to a long chain of events through the UI. How should I solve this problem?

Answer 1

For anyone with similar issues - from my research, modifying reference values ​​on props doesn't seem to be the intended way to do it with VueJS. It's a shame because initially it looked like a pretty neat pattern.

I have now implemented vuex which works well and avoids the long event line back to the original owner of the prop data.

If you want to press it, then modifying the reference of the object itself will force the chain to be updated. So (for example) if you want to update an array property of prop data, then you don't "push" it, but replace the entire array object (causing other components with computed properties on that array property to be recalculated). But again, not recommended.