Vuetify v-select 不触发选项选择事件单击自定义模板

问：

我正在使用 Vuetify 测试版 （），因为我必须使用 Vue 3 并且它不支持 Vuetify 2.x。v3.0.0-beta.6

我想创建一个带有国旗图标的 i18n 选择器。

为了管理 i18n，我使用库。vue-i18n

如前所述，创建此选择器 （https://vue-i18n.intlify.dev/guide/essentials/scope.html#locale-changing） 非常简单。vue-i18n

所以我正在做的是使用 Vuetify 组件来添加我的自定义项。<v-select>

问题是组件看起来是我想要的样子，但选择行为中断了。

我的代码在那里：

<template>
    <v-select class="language-select" v-model="$i18n.locale" :items="$i18n.availableLocales" @change="setLocale($event)"
        hide-selected variant="plain">
        <template v-slot:selection="{ item }">
            <v-icon> {{ getFlag(item) }} </v-icon>
        </template>
        <template v-slot:item="{ item }">
            <v-list-item :key="`locale-${item.value}`" :value="item.value" :prepend-icon="getFlag(item)"
                :title="getItemCaption(item)">
            </v-list-item>
        </template>
    </v-select>

</template>

<script setup lang="ts">
import { useLocaleStore } from "@/stores/locale"
import selectCaption from "@/i18n/language-select-caption.json"

function setLocale(event: Event) {
    useLocaleStore().setLocale((<HTMLInputElement>event.target).value);
}

function getFlag(locale: any) {
    const xx = locale.value === 'en' ? "gb" : locale.value;
    return "fi fis rounded-icon fi-" + xx;
}

function getItemCaption(locale: any) {
    return selectCaption[locale.value];
}

</script>

<style lang="scss">
.language-select {
    max-width: 60px;
    margin-top: 35px;
}

.rounded-icon {
    border-radius: 50%;
    font-size: 24px;
}
</style>

注意：如果我删除它，我需要在项目插槽中使用，所有项目都显示在同一行上，作为唯一选项。<v-list-item>

知道我做错了什么吗？