Error: Need to install with `app.use` function when using Quasar i18n in Vue component

Question

colleagues! I'm trying to implement internationalization with Quasar, but I'm having issues using it in a Vue component.

I'm bootstrapping it according to the documentation:

The file is ./src/boot/i18n.js. It exports { i18n } to use the configuration outside of Vue components, which works.

import { createI18n } from 'vue-i18n'
import messages from '../config/i18n'

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'en',
  fallbackLocale: 'en',
  availableLocales: ['es', 'en'],
  messages,
})

export default ({ app, Vue }) => {
  Vue.use(i18n)
  app.use(i18n)
}

export { i18n }

This is my ./src/config/quasar.config.js file:

import {
  AddressbarColor,
  AppFullscreen,
  AppVisibility,
  BottomSheet,
  Cookies,
  Dark,
  Dialog,
  Loading,
  LoadingBar,
  LocalStorage,
  Meta,
  Notify,
  Platform,
  Screen,
  SessionStorage,
} from 'quasar'

export default {
  eslint: {
    warnings: true,
    errors: true,
    exclude: [/(node_modules|ui[\\/])/],
  },

  lang: 'en',

  css: ['/styles/css/app.css'],
  extras: ['Nunito'],

  devServer: {
    port: 9090,
    open: {
      app: { name: 'brave' },
    },
  },

  boot: ['router', 'i18n'],

  framework: {
    iconSet: 'svg-mdi-v6',

    autoImportVueExtensions: ['vue', 'md'],

    config: {
      loadingBar: {
        color: 'brand-primary',
        size: '4px',
      },
    },

    plugins: [
      'AddressbarColor',
      'AppFullscreen',
      'AppVisibility',
      'BottomSheet',
      'Cookies',
      'Dark',
      'Dialog',
      'Loading',
      'LoadingBar',
      'LocalStorage',
      'Meta',
      'Notify',
      'Platform',
      'Screen',
      'SessionStorage',
    ],
  },

  plugins: {
    AddressbarColor,
    AppFullscreen,
    AppVisibility,
    BottomSheet,
    Cookies,
    Dark,
    Dialog,
    Loading,
    LoadingBar,
    LocalStorage,
    Meta,
    Notify,
    Platform,
    Screen,
    SessionStorage,
  },

  animations: 'all',
}

And this is my main.js file:

import { createApp } from 'vue'
import { Quasar } from 'quasar'
import quasarConfig from './config/quasar.config'
import router from './vue/router'

// Import icon libraries
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'

// A few examples for animations from Animate.css:
// import @quasar/extras/animate/fadeIn.css
// import @quasar/extras/animate/fadeOut.css

// Import Quasar css
import 'quasar/src/css/index.sass'

import App from './App.vue'

const myApp = createApp(App)

myApp.use(router)
myApp.use(Quasar, quasarConfig)

myApp.mount('#app')

The issue arises when I destructure t from useI18n as indicated in the documentation section:

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

  const { t } = useI18n()
  const $router = useRouter()

  const title = ref(t('errors.rules.notFound.title'))
</script>

The error displayed in the browser console says: "SyntaxError: Need to install with `app.use` function"

How can I resolve this without compromising the usage of the instance outside of Vue components?