复选框组的vue嵌套for循环

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input type="checkbox" v-model="option.checked">
      {{ option.value }}
      <div v-for="subOption in option.subOptions" :key="subOption.value">
        <input type="checkbox" v-model="subOption.checked">
        {{ subOption.value }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'Option 1',
          checked: false,
          subOptions: [
            { value: 'Sub Option 1', checked: false },
            { value: 'Sub Option 2', checked: false }
          ]
        },
        {
          value: 'Option 2',
          checked: false,
          subOptions: [
            { value: 'Sub Option 3', checked: false },
            { value: 'Sub Option 4', checked: false }
          ]
        }
      ]
    };
  }
};
</script>