Vue view update？ - vue.js

Question

Build A Single page app with vue 2 and vue-router 2
build.vue:
<style>
#build-content {
margin: 20px 20px;
}
</style>
<template>
<div id="build-content">
<h2>title</h2>
<div v-for="(buildValue, buildKey) in currentConfig">
<li v-for="(value, key) in buildValue"
is="build-item"
v-bind:buildEventId="buildKey"
v-bind:buildKey="key"
v-bind:buildValue="value"
v-on:remove="remove">
</li>
</div>
<br>
<br>
</div>
</template>
<script>
import BuildItem from './build-item.vue'
import Vue from "vue";
import qs from 'qs';
export default {
components:{ BuildItem },
data () {
return {
currentConfig: {
"1" : {
"akey" : "aValue",
"bkey" : "bValue",
"ckey" : "cValue",
},
"2" : {
"akey" : "aValue",
"bkey" : "bValue",
"ckey" : "cValue",
}
}
}
},
methods: {
remove: function (eventId, key) {
console.log(eventId + " " + key);
Vue.delete(this.currentConfig[eventId], key);
}
},
mounted: function () {
}
}
</script>
build-item.vue:
<style scoped>
.tab {
margin-right:2em
}
</style>
<template>
<div>
<br>
<span class="tab">event</span>
<Input v-model="eventId" placeholder="input..." style="width: 150px" class="tab"/>
<span class="tab">key:</span>
<Input v-model="key" placeholder="input..." style="width: 200px" class="tab"/>
<span class="tab">value:</span>
<Input v-model="value" placeholder="input..." style="width: 300px" class="tab"/>
<Button type="error" #click="remove">remove</Button>
</div>
</template>
<script>
export default {
data () {
return {
eventId: this.buildEventId,
key: this.buildKey,
value: this.buildValue,
}
},
props: {
buildEventId: {
type: String
},
buildKey: {
type: String
},
buildValue:{
type: String
}
},
methods: {
remove: function () {
this.$emit('remove', this.eventId, this.buildKey);
}
}
}
</script>
Click the first row of the list("1","akey","aValue')，but remove the third row("1","cKey","cValue") ，console.log output is correct，how to fix it?
Thanks

Answer 1

https://v2.vuejs.org/v2/guide/list.html#key
This default mode is efficient, but only suitable when your list
render output does not rely on child component state or temporary DOM
state (e.g. form input values).
<div v-for="(buildValue, buildKey) in currentConfig" :key="buildKey">
<li v-for="(value, key) in buildValue" :key="key"
is="build-item"
v-bind:buildEventId="buildKey"
v-bind:buildKey="key"
v-bind:buildValue="value"
v-on:remove="remove">
</li>
</div>
add :key="buildKey" and :key="key" ,Fixed the problem