Component state in slot doesn't change when paging/sorting/filtering

I have the following (products) table:

<b-table :fields="fields"
         :items="findAllProducts"
         :current-page="currentPage"
         :per-page="perPage"
         :filter="filter"
         :sort-by.sync="sortBy"
         :sort-desc.sync="sortDesc">

  <template slot="price" scope="data">
    <price-editable :product="data.item"></price-editable>
  </template>

</b-table>

findAllProducts is a provider function that does an http request based on the current page/sort/filter. price-editable is a custom component that renders an inline editable price field.

Now, when I do paging/sorting/filtering, the state (data) inside the price-editable component stays the same. It doesn’t re-render, but keeps the state of the ‘previous’ row.

How can I force to re-render a component inside a slot when paging/sorting/filtering?

[jpkleemans]

@alexsasharegan @mosinve Thanks! Adding the :key="data.item.id" prop solved my problem. Really the kind of solution I was hoping for!

[alexsasharegan]

Vue is really intelligent about reusing components for performance. Usually a new key would trigger a new component. Maybe try to add a key on your custom component based on your item id or something unique in your record.