How to fix "Uncaught TypeError: _ctx.$i18next is undefined" and "Unhandled error during execution of render function"

Question

I'm a back end dev who's been playing around with vuejs and i18next. I'm trying to make a dropdown menu which would allow a user to change the website language. I run into the following errors:

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
For more details, see https://link.vuejs.org/feature-flags. runtime-core.esm-bundler.js:5235

[Vue warn]: Property "$i18next" was accessed during render but is not defined on instance. 
  at <TranslationComponent> runtime-core.esm-bundler.js:44

[Vue warn]: Unhandled error during execution of render function 
  at <TranslationComponent> runtime-core.esm-bundler.js:44

Uncaught TypeError: _ctx.$i18next is undefined
    render App.vue:10
    renderList runtime-core.esm-bundler.js:2899
    render App.vue:9
    renderComponentRoot runtime-core.esm-bundler.js:876
    componentUpdateFn runtime-core.esm-bundler.js:5997
    run reactivity.esm-bundler.js:176
    update runtime-core.esm-bundler.js:6128
    setupRenderEffect runtime-core.esm-bundler.js:6138
    mountComponent runtime-core.esm-bundler.js:5906
    processComponent runtime-core.esm-bundler.js:5860
    patch runtime-core.esm-bundler.js:5328
    render runtime-core.esm-bundler.js:6649
    mount runtime-core.esm-bundler.js:3930
    mount runtime-dom.esm-bundler.js:1494
    <anonymous> main.js:6
    js index.js:85
    __webpack_require__ index.js:288
    __webpack_exports__ index.js:1410
    O index.js:334
    <anonymous> index.js:1411
    <anonymous> index.js:1413

My web page now doesn't render at all except if I comment out the code for the dropdown menu. I've been trying a lot of things for the past few days but nothing seem to work. It feels like TranslationComponent is not properly linked to i18n but I'm not sure how to fix that.

Here's my App.vue:

<template>
  <div>
    <div class="p-3">
      <div class="mx-auto max-w-screen-lg flex items-center justify-center">
        <a href="/" class="mx-2 btn">Home</a>
        <select v-model="$i18n.locale">
          <option v-for="(lng, i) in Object.keys(languages)" :key="`Lang${i}`" :value="lng">
            <p v-if="$i18next.locale!== lng">
              {{ languages[lng].nativeName }}
            </p>
            <strong v-if="$i18next.locale === lng">
              {{ languages[lng].nativeName }}
            </strong>
          </option>
        </select>
      </div>
    </div>
    <router-view />
  </div>
</template>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #nav {
    padding: 30px;
  }
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }
  #nav a.router-link-exact-active {
    color: #42b983;
  }
  .btn{
    @apply border-2 border-transparent bg-green-500 ml-3 py-2 px-4 font-bold uppercase text-white rounded transition-all hover:border-green-500 hover:bg-transparent hover:text-green-500
  }
</style>

<script>
  export default {
    name: 'TranslationComponent',
    data () {
      return {
        languages: {
          en: { nativeName: 'English' },
          fr: { nativeName: 'Français' },
          es: { nativeName: 'Español' }
        }
      }
    }
  }
</script>

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import routes from './routes'
import i18n from './../../../i18n.js'

createApp(App).use(i18n).use(routes).mount('#app')

the component rendered in : HomeSub.vue

<template>
  <div>
    <h1>{{ $t('homeDescr') }}</h1>
    <div>
        <p>Projects tab</p>
        <p>Socials</p>
    </div>
  </div>
</template>

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

  export default {
    setup() {
      const { t } = useI18n()
      return { t }
    },
    name: 'TranslationComponent'
  }
</script>

i18n.js:

import { createI18n } from "vue-i18n";
import en from "./public/locales/en.json"
import fr from "./public/locales/fr.json"

export default createI18n({
  locale: 'en',
  fallbackLocale: 'fr',
  globalInjection: true,
  legacy: false,
  translations: {
    en,
    fr
  }
});

en.json:

{
    "nav": {
        "home": "home",
        "about": "About"
    },
    "translation": {
        "homeDescr": "This is the Home page"
    }
}

I've tried to put "globalInjection: true" and I've cleaning up my code, making sure everything is well defined etc. The dropdown menu displays the language lists properly if I comment out all the different lines that throw up the error and the {{ $t('homeDescr') }} now doesn't work anymore. I'm not exactly sure how to fix this situation and I don't know what else to do. If you have an idea I'd really appreciate your help.