how can I update message in vue component

[moHaHa]

hers is my i18n.ts module

import type { Locale } from 'vue-i18n'
import { createI18n } from 'vue-i18n'
import { type UserModule } from '~/types'

// Import i18n resources
// https://vitejs.dev/guide/features.html#glob-import
//
// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
const i18n = createI18n({
  legacy: false,
  locale: '',
  messages: {},
})

const localesMap = Object.fromEntries(
  Object.entries(import.meta.glob('../../locales/*.yml'))
    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
) as Record<Locale, () => Promise<{ default: Record<string, string> }>

export const availableLocales = Object.keys(localesMap)

const loadedLanguages: string[] = []
export const activeLang = ref('')
function setI18nLanguage(lang: Locale) {
  i18n.global.locale.value = lang as any
  if (typeof document !== 'undefined') {
    activeLang.value = lang
    document.querySelector('html')?.setAttribute('lang', lang)
    if (lang === 'ar')
      document.querySelector('html')?.setAttribute('dir', 'rtl')
    else
      document.querySelector('html')?.setAttribute('dir', 'ltr')
  }

  return lang
}

export async function loadLanguageAsync(lang: string): Promise<Locale> {
  // If the same language
  if (i18n.global.locale.value === lang)
    return setI18nLanguage(lang)

  // If the language was already loaded
  if (loadedLanguages.includes(lang))
    return setI18nLanguage(lang)

  // If the language hasn't been loaded yet
  // const messages = await localesMap[lang]()
  const msgs: any = await new Promise((resolve, reject) => {
    setTimeout(async () => {
      const { data } = await useFetch(`http://127.0.0.1:8000/api/locales/content/${lang}`).get().json()
      resolve(data.value.data)
    }, 1000)
  })
  // eslint-disable-next-line no-console
  console.log(msgs)
  // i18n.global.setLocaleMessage(lang, messages.default)
  i18n.global.setLocaleMessage(lang, msgs)
  loadedLanguages.push(lang)
  return setI18nLanguage(lang)
}

export const install: UserModule = ({ app }) => {
  app.use(i18n)
  loadLanguageAsync('ar')
}

and here is my component script

import { useEditorStore } from '~/stores/editor'

const store = useEditorStore()
const field = ref('')
const fieldKey = ref('')
const { t } = useI18n()
const dialog = computed(() => store.dialogModel)
watch(dialog, async (newV) => {
  if (newV === true)
    setupEditor()
})
const { locale } = useI18n()
function setupEditor() {
  field.value = t(store.fieldKey)
  fieldKey.value = store.fieldKey
}
const config = computed(() => {
  return { page: fieldKey.value.split('.')[0], field: fieldKey.value.split('.')[1] }
},
)
const urlAPI = computed(() => `http://127.0.0.1:8000/api/locales/${config.value.page}/${config.value.field}/${locale.value}`)
function save(model: any) {
  const { data } = useFetch(urlAPI.value).patch({ value: model }).json()
   // update message value in 18n. ex : $('header.home') 
  return data
}

function save(model: any) {
const { data } = useFetch(urlAPI.value).patch({ value: model }).json()
// update message value in 18n. ex : $('header.home') ❔ 😕
return data
}

here were I want to upate the message