My Vue list is generated from an array where each item renders a component with bound array item properties.
<div v-for="item in items">
<item v-bind:item="item"></item>
</div>
This component contains mixed data based on the bound properties
Vue.component('item', {
template: '<p>ID: {{item.id}}, {{component_id}}</p>',
props: ['item'],
data: function() {
return {
component_id: this.item.id
}
}
});
The issue arises when changes are made to the initial list array, the component's mixed property remains unchanged and does not update, even when the original bound data changes.
http://codepen.io/anything/pen/bgQBwQ
How can I ensure the component updates its own data property?