如何在编辑表单项目时动态选择输入单选按钮？

<template>
  <div>
    <label>选择项目类型：</label>
    <select v-model="selectedType">
      <option value="type1">类型1</option>
      <option value="type2">类型2</option>
      <option value="type3">类型3</option>
    </select>

    <div v-if="selectedType === 'type1'">
      <label>选项1：</label>
      <input type="radio" v-model="selectedOption" value="option1">
      <label>选项2：</label>
      <input type="radio" v-model="selectedOption" value="option2">
    </div>

    <div v-else-if="selectedType === 'type2'">
      <label>选项A：</label>
      <input type="radio" v-model="selectedOption" value="optionA">
      <label>选项B：</label>
      <input type="radio" v-model="selectedOption" value="optionB">
    </div>

    <div v-else>
      <label>选项X：</label>
      <input type="radio" v-model="selectedOption" value="optionX">
      <label>选项Y：</label>
      <input type="radio" v-model="selectedOption" value="optionY">
    </div>

    <p>你选择的项目类型是：{{ selectedType }}</p>
    <p>你选择的选项是：{{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedType: '',
      selectedOption: ''
    };
  }
};
</script>