how to use i18n in ts file vue 3

Question

i18n.ts

import { definePlugin } from '/@src/app'
import { createI18n } from 'vue-i18n'

import uz from '/@src/locales/uz.json'
import en from '/@src/locales/en.json'
import ru from '/@src/locales/ru.json'


// @ts-ignore
globalThis.__VUE_PROD_DEVTOOLS__ = false

export default definePlugin(({ app }) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'uz',
    fallbackLocale: 'uz',
    globalInjection: true,
    messages: {
      uz,
      ru,
      en,
    },
  })
  app.use(i18n)
})

LocalChanger.vue

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`Lang${lang.id}`" :value="lang.value">
        {{ lang.label }}
      </option>
    </select>
  </div>
</template>

<script>

import { useI18n } from 'vue-i18n'
export default {
  setup () {
    const { locale } = useI18n({ useScope: 'global' })
    return {
      locale,
      langs: [
        {id:1, value: 'en', label: 'English' },
        {id:2, value: 'ru', label: 'Руский' },
        {id:3, value: 'uz', label: 'Uzbek' },
      ]
    }
  }
}
</script>

How can I use i18n in index.ts file??

index.ts

export const resources4 = [
  {
    id: 0,
    image: '/assets/illustrations/blog/muniversity.png',
    title: i18n.global.t('universitet_title'),
    // likes: '76',
    categories: [
      {
        name: 'Website',
      },
      {
        name: 'Webdesign',
      },
      {
        name: 'Development',
      },
    ],
    date: 'mart, 2023',
    duration: 2,
    path: '/blog/post'
  },
...

]

this error

TypeError: Cannot read properties of undefined (reading 't') 0

I have separate i18n.ts file as shown below. I might have missed something somewhere in the documentation, and if that's the case I apologize in advance.

i18n.ts

import { definePlugin } from '/@src/app'
import { createI18n } from 'vue-i18n'

import uz from '/@src/locales/uz.json'
import en from '/@src/locales/en.json'
import ru from '/@src/locales/ru.json'


// @ts-ignore
globalThis.__VUE_PROD_DEVTOOLS__ = false

export default definePlugin(({ app }) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'uz',
    fallbackLocale: 'uz',
    globalInjection: true,
    messages: {
      uz,
      ru,
      en,
    },
  })
  app.use(i18n)
})

LocalChanger.vue

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`Lang${lang.id}`" :value="lang.value">
        {{ lang.label }}
      </option>
    </select>
  </div>
</template>

<script>

import { useI18n } from 'vue-i18n'
export default {
  setup () {
    const { locale } = useI18n({ useScope: 'global' })
    return {
      locale,
      langs: [
        {id:1, value: 'en', label: 'English' },
        {id:2, value: 'ru', label: 'Руский' },
        {id:3, value: 'uz', label: 'Uzbek' },
      ]
    }
  }
}
</script>

How can I use i18n in index.ts file??

index.ts

export const resources4 = [
  {
    id: 0,
    image: '/assets/illustrations/blog/muniversity.png',
    title: i18n.global.t('universitet_title'),
    // likes: '76',
    categories: [
      {
        name: 'Website',
      },
      {
        name: 'Webdesign',
      },
      {
        name: 'Development',
      },
    ],
    date: 'mart, 2023',
    duration: 2,
    path: '/blog/post'
  },
...

]

this error

TypeError: Cannot read properties of undefined (reading 't') 0

I have separate i18n.ts file as shown below. I might have missed something somewhere in the documentation, and if that's the case I apologize in advance.