Vue V-for binding array to wrong components

Question

In my Vuex state I have an object containing an array of orderLines, in my model I access that object using a getter and loop over the orderLines creating for each one a component.

Now when I trigger a remove mutation, I request an update of the order object as well and swap the old with the correct new one. So far so good.. all my components get the new order object and update their lists.

But they do not Create/Recreate the components in the loop they just seem to update the indexes -> resulting in the next problem:

If i remove the top item all the next item's data is bound to the 'removed' component and its state :/

       <div v-for="orderLine in order.order_lines">
          <order-line :order-line="orderLine" ></order-line>
       </div>

Answer 1

Use a key.

<div v-for="orderLine in order.order_lines" :key="orderLine">
      <order-line :order-line="orderLine" ></order-line>
</div>

If each order_line has an id that would be an even better key.