问一下,computed 与 click checkbox 是否冲突,导致checkbox不刷新,谢谢

vue version: 3.9.1
全新脚手架项目,代码非常少,bug原因不明,就是点一个checkbox导致另一个checkbox被选中,或点取消选中,另一个checkbox也被取消选中。。。。

我在练习TODOLIST,用了 computed 属性,结果在页面上点来点去,都是checkbox状态不一致的bug。
还请前辈过目啊,代码共50行,谢谢了。

<template>
  <div id="app">
    <h2>正在进行</h2>
    <ul>
      <li v-for="item in notChecked"  v-bind:key="item.happy">
         <input type="checkbox" v-model="item.checked"/> {{item.title}}
      </li>
    </ul>
    <h2>已经完成</h2>
    <ul>
      <li v-for="item in beChecked"  v-bind:key="item.nothappy">
         <input type="checkbox" v-model="item.checked"/> {{item.title}}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      todo: '',
      list: [
        {
          title: '这是一个状态',
          checked: true
        },
        {
          title: '这是另一个状态',
          checked: true
        }
      ]
    }
  },
  computed: {
    notChecked: function() {
      return this.list.filter((item) => { return !item.checked; }); 
    },
    beChecked: function() {
      return this.list.filter((item) => { return item.checked; }); 
    }
  }
}
</script>

<style>
</style>

谢谢啊,我试了下,点击box没有反应啊。。
这个是要做到选中box则移到“已经完成”栏下面,未选中box则移到“正在进行”栏下面。。
bug是,反复点击会出现选中的box在“正在进行”栏下面,未选中的box却出现在“已经完成”栏下面。

又仔细看了一下,上午我说的不对。原因是 vue 在渲染列表时,是根据 key 决定对 < li > 如何操作。下面是代码:

<template>
  <div id="app">
    <h2>正在进行</h2>
    <ul>
      <li v-for="item in notChecked"  v-bind:key="item.id">
         <input type="checkbox" v-model="item.checked"/> {{item.title}}
      </li>
    </ul>
    <h2>已经完成</h2>
    <ul>
      <li v-for="item in beChecked"  v-bind:key="item.id">
         <input type="checkbox" v-model="item.checked"/> {{item.title}}
      </li>
    </ul>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      todo: '',
      list: [
        {
          title: '这是一个状态',
    	  checked: true,
    	  id: 0,
        },    
        {    
          title: '这是另一个状态',
          checked: true,
          id: 1,
        }
      ],
    }
  },
  computed: {
    notChecked: function() {
      return this.list.filter((item) => { return !item.checked; }); 
    },
    beChecked: function() {
      return this.list.filter((item) => { return item.checked; }); 
    }
  }
}
</script>

Perfect!!

list.id 原来不是默认有的啊!
非常感谢,bug全没了。。