如何销毁elementui 的checkbox

Question

<ul>
    <li v-for="(item,index) in arr1">
        <el-checkbox :model="false" @change="h1(index)"></el-checkbox>
        <span class="pad-lft">{{item.title}}</span>
    </li>
</ul>

data() {
    return {
        arr1:[{
            id:1,
            title:'test1',
            checked:false
        },{
            id:2,
            title:'test2',
            checked:false
        },{
            id:3,
            title:'test3',
            checked:false
        }]
     }
 },

methods: {
    h1(index){
        console.log(index)
        this.arr1.splice(index,1)
    },
}

想要的效果是选择即该条数据即消失，但是目前的效果是..
【点击第一个选中，结果如下：】

数据消失了，但是选中的效果依旧存在，求解

Answer 1

修改下回答如下：
li标签加上v-show，用上你的checked

<li v-for="(item, index) in arr1" :key="index" v-show="!item.checked">

h1函数改成下面这样：

h1(index, item){
  console.log(index, item)
  this.arr1[index].checked = !this.arr1[index].checked
}

Answer 2

<ul>
    <li v-if="!item.checked" v-for="(item,index) in arr1">
        <el-checkbox :model="false" @change="h1(index)"></el-checkbox>
        <span class="pad-lft">{{item.title}}</span>
    </li>
</ul>

Answer 3

把<el-checkbox :model="false" @change="h1(index)"></el-checkbox>改为<el-checkbox v-model="item.checked" @change="h1(index)"></el-checkbox>即可