Vue JS如何根据传递的嵌套v-for值将选项设置为选中？

<template>
  <div>
    <div v-for="category in categories" :key="category.id">
      <h3>{{ category.name }}</h3>
      <ul>
        <li v-for="option in category.options" :key="option.id">
          <label>
            <input type="checkbox" :checked="isSelected(category.id, option.id)" @change="toggleSelection(category.id, option.id)">
            {{ option.name }}
          </label>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: 'Category 1',
          options: [
            { id: 1, name: 'Option 1' },
            { id: 2, name: 'Option 2' },
            { id: 3, name: 'Option 3' }
          ]
        },
        {
          id: 2,
          name: 'Category 2',
          options: [
            { id: 4, name: 'Option 4' },
            { id: 5, name: 'Option 5' },
            { id: 6, name: 'Option 6' }
          ]
        }
      ],
      selectedOptions: []
    };
  },
  methods: {
    isSelected(categoryId, optionId) {
      return this.selectedOptions.some(option => option.categoryId === categoryId && option.optionId === optionId);
    },
    toggleSelection(categoryId, optionId) {
      const index = this.selectedOptions.findIndex(option => option.categoryId === categoryId && option.optionId === optionId);
      if (index > -1) {
        this.selectedOptions.splice(index, 1);
      } else {
        this.selectedOptions.push({ categoryId, optionId });
      }
    }
  }
};
</script>