0👍
You might consider to create a common owner component to share the state between those component, from the Thinking in React:
For each piece of state in your application:
· Identify every component that renders something based on that state.
· Find a common owner component (a single component above all the components that need the state in the hierarchy).
·Either the common owner or another component higher up in the hierarchy should own the
state.·If you can’t find a component where it makes sense to own the
state, create a new component simply for holding the state and add it
somewhere in the hierarchy above the common owner component.
In your case, your component can be nested under a common owner component:
Container.vue/
│
├── Navbar.vue /
│
├── Shop.vue /
│
├── Detail.vue /
If you updating your cartItem in Shop.vue, you can updated your result by using emit
I create a codesandbox to repeat your problem.
Here is the link: https://codesandbox.io/s/132v86qm4q
Hope I solve your problems!