[Vuejs]-Vue component not updating after parent state change

Use “key” attribute when rendering elements using v-for, for example:

<p v-for="(product, index) in order.products" :key="i">..</p>

The relevant documentation is here:

You can directly use v-for on a custom component, like any normal
element:

<my-component v-for="item in items" :key="item.id"></my-component>

In 2.2.0+, when using v-for with a component, a key is now required.

However, this won’t automatically
pass any data to the component, because components have isolated
scopes of their own. In order to pass the iterated data into the
component, we should also use props:

   <my-component
     v-for="(item, index) in items"
     v-bind:item="item"
     v-bind:index="index"  
     v-bind:key="item.id">
   </my-component>

The reason for not automatically injecting item into the component is because that makes the component
tightly coupled to how v-for works. Being explicit about where its
data comes from makes the component reusable in other situations.

And here:

When Vue is updating a list of elements rendered with v-for, it by
default uses an “in-place patch” strategy. If the order of the data
items has changed, instead of moving the DOM elements to match the
order of the items, Vue will simply patch each element in-place and
make sure it reflects what should be rendered at that particular
index.

…

To give Vue a hint so that it can track each node’s identity, and thus
reuse and reorder existing elements, you need to provide a unique key
attribute for each item. An ideal value for key would be the unique id
of each item.