如何使用json原始数据在vuejs中制作依赖的第二个列表？

data() {
  return {
    jsonData: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      // 其他JSON数据项
    ],
    selectedItemId: null, // 用于存储选中的项的ID
    dependentList: [] // 用于存储依赖的第二个列表数据
  }
}

methods: {
  updateDependentList() {
    // 根据选中的项的ID筛选出依赖的第二个列表数据
    this.dependentList = this.jsonData.filter(item => item.id === this.selectedItemId);
  }
}

<div>
  <select v-model="selectedItemId" v-on:change="updateDependentList">
    <option value="">请选择</option>
    <option v-for="item in jsonData" :value="item.id">{{ item.name }}</option>
  </select>
</div>

<div>
  <ul>
    <li v-for="item in dependentList" :key="item.id">{{ item.name }}</li>
  </ul>
</div>