Vue phantom component

This jsFiddle demo phantom data being used by a refreshed component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.js"></script>
<body>
  <h3>
    Components internal state is not being updated
  </h3>
  <div id="app">
    <button v-on:click="changeDataSet">
      Change data
    </button>
    <button v-on:click="sortDataSet">
      Sort data
    </button>
    <ul>
      <li v-for="item in items">
        <test-component :prop1="item">
        </test-component>
      </li>
    </ul>
  </div>
</body>

<script id="component_template" type="x-template">
	<div>Prop: {{prop1}} || Internal state: {{internalState}}</div>
</script>

JavaScript

var testComponent = Vue.component('test-component', {
  template: '#component_template',
  props: ['prop1'],
  data: function(){
    return {
      internalState: this.prop1 
    }
  }
})

new Vue({
  el: "#app",
  data: function(){
    return {
      items: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      dataToggle: true,
      sorted: true
    };
  },
  methods: {
    sortDataSet: function(){
      if(this.sorted){
        this.items.reverse();
      } else {
        this.items.sort;
      }
    }
    ,changeDataSet: function(){
      if(this.dataToggle){
        this.items = ['Item 4', 'Item 5', 'Item 6', 'Item 7'];
      } else {
        this.items = ['Item 1', 'Item 2', 'Item 3'];
      }
      
      this.dataToggle = !this.dataToggle;
    }
  }
});