Vuetify, v-for checkbox with search field. Strange behavior on the checkbox - vuejs2

Question

I'm making a list of person to select with a search bar to find the person name. I'm using computed and filter to search the list. But there's strange behavior on my checklist. I don't know what happen. Please check the codepen link above. Try searching then delete the search.
https://codepen.io/rahmatfajar15/pen/OqPqRy?editors=1010
template:
<v-layout column fill-height>
<v-flex>
<v-text-field
v-model="pattern"
box
hide-details
label="Cari Peserta..."
prepend-inner-icon="search"
clear-icon="close"
clearable
/>
</v-flex>
<v-layout column>
<div
v-for="item in filteredPeserta"
>
<v-layout row class="text-xs-left">
<div class="xs2 justify-center align-center">
<v-checkbox
height="16"
v-model="tempPeserta"
:value="item.id"
/>
</div>
<v-layout xs10 column justify-center>
<pre class="body-2">{{ item.name }}</pre>
</v-layout>
</v-layout>
</div>
</v-layout>
</v-layout>
script:
new Vue({
el: '#app',
data: () => ({
pattern: '',
tempPeserta: [],
listPeserta: [
{
id: '1',
name: 'Agung'
},
{
id: '2',
name: 'Bucin'
},
{
id: '3',
name: 'Chandra'
},
{
id: '4',
name: 'Dedek'
},
{
id: '5',
name: 'Enok'
},
{
id: '6',
name: 'Fajar'
},
{
id: '7',
name: 'Galih'
},
{
id: '8',
name: 'Hayo'
},
{
id: '9',
name: 'Ilsa'
},
]
}),
computed: {
filteredPeserta () {
return this.listPeserta.filter(item => {
return item.name.toLowerCase().indexOf(this.pattern.toLowerCase()) > -1
})
}
}
})

Answer 1

You need to add key when using v-for because Vue will reuse list component (document)
<div
v-for="item in filteredPeserta"
:key="item.id"
>
....
</div>