[Vuejs]-How to change the language of vue.js 3 website using option tag. (with i18n)

You can try as follow. You can also check the Example

<template>
  <div>
    <select v-model="selected_language" @change="change_language">
      <option value="en">English</option>
      <option value="ir">Persian</option>
    </select>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { locale, t } = useI18n();
    const selected_language = ref(locale.value);

    const change_language = () => {
      // Update the locale based on the selected value
      locale.value = selected_language.value;
    };

    return {
      selected_language,
      change_language,
    };
  },
};
</script>