JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<div id="app">
    <ul>
      <li v-for="item in items">
        <span>{{ item | json}}</span>
        <a @click="deleteByIndex($index)">[delete it]</a>
      </li>
    </ul>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
		items: [
    	{ id: 4, text: 'item one'},
      { id: 5, text: 'item two'},
    	{ id: 6, text: 'item three'},
      { id: 7, text: 'item four'},
    ]
  },
  methods: {
  	deleteByIndex: function(index) {
    	this.items.splice(index, 1)
    },
    deleteById: function(id) {
    	var index = this.items.findIndex(item => item.id === id)
      this.deleteByIndex(index)
    }
  }
})

// 外部呼叫

// 刪除最後一個
app.deleteByIndex(app.$data.items.length - 1)

// 刪除指定id
app.deleteById(4)