如何在vue多选中取消选择预先选择的组选项？

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" v-model="selectedOptions" :value="option.id">
      {{ option.name }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" v-model="selectedOptions" :value="option.id" @change="handleOptionChange(option.id)">
      {{ option.name }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' }
      ],
      selectedOptions: [1, 2] // 预先选择的组选项
    };
  },
  methods: {
    handleOptionChange(optionId) {
      const index = this.selectedOptions.indexOf(optionId);
      if (index > -1) {
        this.selectedOptions.splice(index, 1); // 从selectedOptions数组中移除预先选择的组选项
      }
    }
  }
};
</script>