Vue中复选框列表项删除后v-model绑定值未更新如何解决？

Vue的复选框v-model绑定数组时，仅会响应用户对复选框的点击操作更新绑定值，源数组players发生变更时，框架不会自动校验selectedPlayers中存储的ID是否仍存在于players中，已删除元素对应的复选框销毁时也不会主动触发绑定数组的清理，因此会残留无效ID。

方案1：监听源数组变化自动清理（通用场景推荐） #

通过监听players数组的变更，每次更新后过滤掉selectedPlayers中不存在的ID，实现自动同步。
Vue2示例代码：

watch: {
  players: {
    // 若仅替换整个数组可删除deep配置提升性能
    deep: true,
    handler(newPlayers) {
      const validIdList = newPlayers.map(item => item.id)
      this.selectedPlayers = this.selectedPlayers.filter(id => validIdList.includes(id))
    }
  }
}

Vue3示例代码：

import { watch } from 'vue'

watch(players, (newPlayers) => {
  const validIdList = newPlayers.map(item => item.id)
  selectedPlayers.value = selectedPlayers.value.filter(id => validIdList.includes(id))
}, { deep: true })

方案2：操作源数组时同步更新选中值（性能更优） #

如果对players的修改逻辑（如删除、新增）是固定的，可以直接在操作逻辑中同步处理selectedPlayers，无需额外监听。
以删除玩家逻辑为例：

// Vue3示例，Vue2修改对应变量即可
function removePlayer(playerId) {
  // 移除源数组对应项
  players.value = players.value.filter(p => p.id !== playerId)
  // 同步移除选中数组中的无效ID
  selectedPlayers.value = selectedPlayers.value.filter(id => id !== playerId)
}

内容的提问来源于stack exchange，提问作者Beasteca