如何用vuetify链接两个自动补全？

<template>
  <div>
    <v-autocomplete
      v-model="selectedItem1"
      :items="items1"
      @change="updateItems2"
      label="Autocomplete 1"
    ></v-autocomplete>
    <v-autocomplete
      v-model="selectedItem2"
      :items="items2"
      label="Autocomplete 2"
    ></v-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem1: null,
      selectedItem2: null,
      items1: ['Option 1', 'Option 2', 'Option 3'],
      items2: [],
    };
  },
  methods: {
    updateItems2() {
      // 根据选择的值更新第二个自动补全输入框的选项列表
      if (this.selectedItem1 === 'Option 1') {
        this.items2 = ['Option A', 'Option B', 'Option C'];
      } else if (this.selectedItem1 === 'Option 2') {
        this.items2 = ['Option X', 'Option Y', 'Option Z'];
      } else {
        this.items2 = [];
      }
    },
  },
};
</script>