Vue 2.0 Issue

How to update data without component update?

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    <button @click="changeNode">
      change node
    </button>
    <button @click="changeData">
      change data
    </button>
    <button @click="reset">
      reset
    </button>
  </div>
  <div class="container">
    <div>
      <h2>Actual node</h2>
      <div class="wrap">
         <p v-for="item in items" :key="item">
           {{ item }}
         </p>
      </div>
    </div>
    <div>
      <h2>Actual data</h2>
      <pre>{{ items }}</pre>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
}
.container div {
  margin-left: 15px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  methods: {
  	changeNode () {
      const node = document.querySelector('.wrap')
    	const first = node.firstChild
      const third = node.lastChild
      node.insertBefore(third, first)
    },
    changeData () {
    	this.items.splice(0, 0, this.items.splice(2, 1)[0])
    },
    reset () {
      location.reload(true)
    }
  }
})