Vue.js – components data do not update

I have a Vue list that is based of an array and each array item renders a component where I bind the array item properties.

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

This component has a mixed data, based on the binded properties

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

The problem is that when I change the initial list array in any way, the mixed prop of the component maintains it’s original update and does not change, even if the original binded data changes.

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

How can I make the component to update it’s ow data property?

Answer

As requested in the form of an answer:

In this case a computed property is the correct approach, leading to the following code:

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;
    }
  }
});

This way the computed_id will be (correctly) recomputed every time the item prop changes.