JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <ul>
   <!-- :key="index"는 마지막이 삭제 -->
   <!-- :key="entry.key"는 제대로 삭제 -->
    <li v-for="(entry, index) in items" :key="index">
       <child :entry="entry" :index="index" @remove="remove"></child>
    </li>
  </ul>
</div>

<template id="child">
  <div>
    {{ row.username }}
    <button @click="$emit('remove', index, row.key)">삭제</button>
  </div>
</template>

JavaScript

const Child = {
	template: '#child',
  props: {
  	entry: {
    	type: Object,
      required: true
    },
    index: {
    	type: Number,
      required: true
    }
  },
  data () {
  	return {
    	row: {}
    }
  },
  watch: {
  	entry (value) {
    	this.row = Object.assign({}, this.entry)
    }
  },
  mounted () {
  	this.row = Object.assign({}, this.entry) 
  }
}


new Vue({
	el: '#app',
  components: {
  	Child
 	},
  data () {
  	return {
    	items: [
      	{
        	username: 'test',
          key: '3333'
        },
        {
        	username: 'test22',
          key: '444'
        },
        {
        	username: 'test33',
          key: '555'
        },
        {
        	username: 'test44',
          key: '666'
        }
      ]
    }
  },
  methods: {
  	remove (index) {
    	console.log(this.items.splice(index, 1))
      console.log(this.items)
    }
  }
})