LanguageSelector.vue

<template>
  <div class="lang-selector">
    <van-dropdown-menu>
      <van-dropdown-item v-model="lang" :options="options" @change="changeLang" />
    </van-dropdown-menu>
  </div>
</template>

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

const { locale } = useI18n()
const lang = ref(locale.value)
const options = [
  { text: 'English', value: 'en' },
  { text: 'العربية', value: 'ar' }
]

function changeLang(val) {
  locale.value = val
  lang.value = val
  document.dir = val === 'ar' ? 'rtl' : 'ltr'
}
</script>

<style scoped>
.lang-selector {
  min-width: 100px;
}
</style>