I'm kinda new to Vue3 or clientside development in general and I'm tasked to read or change the global locale from i18n. But according to the documentation I should be able to use the $i18n variable in my component, but it tells me it is undefined.

This is my i18n config:

```

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

    const i18n = createI18n({
      locale: "nl",
      allowComposition: true,
      warnHtmlInMessage: "off",
      fallbackLocale: "nl",
      messages: {
        en,
        nl,
      },
    });
    export default i18n;

```

This is being used by my main.ts

```

    import { createApp } from "vue";
    import axios from "axios";
    import App from "@/App.vue";
    import router from "@/router";
    import appSettings, { type iAppSettings } from "@/plugin/appSettings";
    import api from "@/plugin/api";
    import i18n from "@/i18n";
    import pinia from "@/stores";

    const startUp = async () => {
      try {
        let settings = null;
        const result = await axios.get("config/config.json");
        settings = result.data;
        console.debug("Loaded Config  : ", settings);

        const app = createApp(App);
        app.use(pinia);
        app.use(router);
        app.use(appSettings, settings);
        app.use(api, settings?.apiUrl);
        app.use(i18n);

        app.mount("#app");

        // change locale via `global` property, this should work according to the documentation but it does not.
        i18n.global.locale = "en";

        //Also not working
        i18n.global.locale.value = "en";
      } catch (e) {
        console.error("start up fail", e);
      }
    };
    startUp()
      .then(
        () => {
          console.debug("Application mounted");
        },
        (e) => {
          console.error("start up fail", e);
        }
      )
      .catch((e) => {
        console.error("start up fail", e);
      });

```

According to the documentation I could use the $i18n variable in my Composition API components.

```

    import { useAppSettings } from "@/plugin/appSettings";
    import { ref } from "vue";
    import { useI18n } from "vue-i18n";

    const props = defineProps({
      year: { type: Number, required: true },
      currentYear: { type: Number, required: true },
    });

    const appSettings = useAppSettings();
    const { t } = useI18n();

    const year = ref(11);
    year.value = props.year.toString();

    if (props.currentYear > 2022) {
      year.value += " - " + props.currentYear;
    }

    //Object is possibly undefined on this
    this.$i18n

    //$i18n is undefined
    $i18n

```

Also tried this in my component template but sadly also not working, like mentioned here <https://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1>