v-select not trigger select event on option click with custom template

[betta73]

I am using Vuetify beta version (v3.0.0-beta.6) because I have to use Vue 3 and Vuetify 2.x is not supported by it.

I want to create an i18n selector with the country flag icon.

To manage i18n I use the vue-i18n library.

As mentioned in vue-i18n it is very simple to create this selector (https://vue-i18n.intlify.dev/guide/essentials/scope.html#locale-changing).

So what I'm doing is using the Vuetify <v-select> component to add my customization.

The problem is that the component looks the way I want it, but the selection behavior breaks.

There my code:

<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>

NOTE: I need to use <v-list-item> in the item slot becasuse if I remove it all items are showed on the same line, as unique option.

Any idea on what i'm doing wrong?

[KaelWD]

<template v-slot:item="{ item, props }">
  <v-list-item v-bind="props"

[betta73]

Thank you!
But I still have two problems with this selector:

1. when I select a new element, the selector shows the old flag, as if the <template v-slot: selection =" {item} "> <v-icon> {{getFlag (item)}} </ v - icon> </template> didn't work.
2. the @change on v-select is not triggered