Vue.js - コンポーネントデータが更新されない

Question

私は配列に基づいたVueリストを持っており、各配列アイテムは配列アイテムプロパティをバインドするコンポーネントをレンダリングします。

<div v-for="item in items"> 
     <item v-bind:item="item"></item> 
    </div> 

このコンポーネントは、混合データを持つバインドさ特性

Vue.component('item', { 
    template: '<p>ID: {{item.id}}, {{component_id}}</p>', 
    props: ['item'], 
    data: function() { 
    return { 
     component_id: this.item.id 
    } 
    } 
}); 

に基づく問題は、私はどのような方法で初期リストの配列を変更したとき、成分の混合プロペラは、それが元だ維持することです元のバインドされたデータが変更された場合でも、更新され、変更されません。

http://codepen.io/anything/pen/bgQBwQ

どのように私はコンポーネントがOWデータプロパティの更新することができますか？回答の形で要求されるように

Answer 1

：

この場合computed propertyには、次のコードにつながる、正しいアプローチである：computed_idは（正確に）再計算する

Vue.component('item', { 
    template: '<p>Original: {{item.id}}, Mixed: {{component_id}}, Computed: {{computed_id}}</p>', 
    props: ['item'], 
    computed: { 
    computed_id: function() { 
     return this.item.id; 
    } 
    } 
}); 

この方法毎回item小道具が変更されます。