I created following component:

<script setup lang="ts">
defineProps<{
  langs: string[]
}>()
</script>

<template>
  <v-btn-toggle>
    <v-btn
      v-for="lang in langs"
      :key="lang"
      :text="$t(`languages.${lang}`)"
      :value="lang"
    ></v-btn>
  </v-btn-toggle>
</template>

And I’m using it like this:

<LangBtnToggle
  v-model="selectedLang"
  :langs
/>

Thanks to fallthrough attributes mechanism $attrs is bound to v-btn-toggle and everythig works as expected.
Now I want to change LangBtnToggle code so that as soon as it receives the langs it emits the first one as default value, like this:

<script setup lang="ts">
import { watchEffect } from 'vue'

const props = defineProps<{
  langs: string[]
}>()

const emit = defineEmits(['update:modelValue'])

watchEffect(() => {
  emit('update:modelValue', props.langs[0])
})
</script>

<template>
  <v-btn-toggle>
    <v-btn
      v-for="lang in langs"
      :key="lang"
      :text="$t(`languages.${lang}`)"
      :value="lang"
    ></v-btn>
  </v-btn-toggle>
</template>

Now selectedLang receives the default value and everything seems to work, but when I click on the other langs from the UI it doesn’t update.
Maybe this is not the proper way to do it, do you know how can I achieve my goal?