如何防止使用Vue.js选中相同的值复选框？

<template>
  <div>
    <input type="checkbox" v-model="checkboxList[0]">选项1
    <input type="checkbox" v-model="checkboxList[1]">选项2
    <input type="checkbox" v-model="checkboxList[2]">选项3
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxList: [false, false, false] // 复选框选中状态数组
    };
  },
  computed: {
    filteredCheckboxList() {
      const selectedValues = this.checkboxList.filter(value => value); // 获取选中的值
      if (selectedValues.length > 1) {
        const lastSelectedValue = selectedValues[selectedValues.length - 1]; // 获取最后选中的值
        this.checkboxList.forEach((value, index) => {
          if (value && index !== selectedValues.length - 1) {
            // 如果有其他值被选中，则取消选中最后选中的值
            this.checkboxList.splice(index, 1, false);
          }
        });
        return this.checkboxList;
      } else {
        return this.checkboxList;
      }
    }
  }
};
</script>

<template>
  <div>
    <input type="checkbox" v-model="checkboxList[0]">选项1
    <input type="checkbox" v-model="checkboxList[1]">选项2
    <input type="checkbox" v-model="checkboxList[2]">选项3
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxList: [false, false, false] // 复选框选中状态数组
    };
  },
  watch: {
    checkboxList: {
      handler(newVal) {
        const selectedValues = newVal.filter(value => value); // 获取选中的值
        if (selectedValues.length > 1) {
          const lastSelectedValue = selectedValues[selectedValues.length - 1]; // 获取最后选中的值
          this.checkboxList.forEach((value, index) => {
            if (value && index !== selectedValues.length - 1) {
              // 如果有其他值被选中，则取消选中最后选中的值
              this.checkboxList.splice(index, 1, false);
            }
          });
        }
      },
      deep: true // 深度监听数组变化
    }
  }
};
</script>