My stack includes Vue 3 and Vuetify 3. I have a v-select which shows a list of locales. I initialize the model-value to “US”. The user clicks on the current value, sees the list of locales, and chooses something other than “US”. All of that works fine BUT, the current selection remains “US”, not the locale that the user chose. Why is that and how do I fix it?

For what it’s worth, @update:model-value contains the value that the user chose, not “US”. The only problem I have is that the current selection is “US” despite what the user chose so what the user sees doesn’t reflect what he chose, which is inevitably going to be confusing for users.

Here is a playground illustrating the problem.

Do the following to see the problem:

1. Click on Settings in the app-bar.
2. Click on Change Locale in the menu. Locale dialog will flash and disappear very quickly.
3. Click on Settings again!
4. The Locale dialog will appear with the initial value set to US.
5. Click on the initial value and change it to anything but US.
6. The current value will still be US even though you changed it to something else.
7. If you have Developer Tools on, you’ll see a console.log message that says “New locale: ” followed by whichever locale you chose.

By the way, if you have any idea why the menu is misbehaving – the locale dialog should not just disappear, forcing you to click Settings again – I’d love to hear from you; otherwise, I’ll post a separate question about that. 😉