this.$i18n.locales undefined when specifying i18n options through component option

Version

v5.3.0

Reproduction link

https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html

Steps to reproduce

Follow the steps on the first section of Lang Switcher

What is expected ?

this.$i18n.locales should contain an array of 3 objects which are defined in nuxt.js.config.

What is actually happening?

this.$i18n.locales is undefined

TypeError
Cannot read property 'filter' of undefined

Additional comments?

this.$i18n.availableLocales returns an array ['en','es','fr]

<div align="right">_{This bug report is available on Nuxt community (#c365)}</div>

[Holi0317]

Codesandbox sample: https://codesandbox.io/s/i18n-plugin-i18nlocales-it7n5

The $i18n property of current component will get override without nuxt-i18n augmentation if there is an <i18n> tag exist in the SFC with vueI18nLoader enabled in nuxt.config.js

In my test, the format of i18n does not affect this bug. Whether it’s yaml or with locale defined will trigger this bug

One workaround (hack) would be to use parent’s $i18n, provided parent is not using <i18n> tag

[coin-au-carre]

Ok thank you this is weird if I do this in your code :

 availableLocales() {
      console.log(this.$i18n)
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }

I can indeed see that this.$i18n.locales is well defined. Something is preventing that on my side…

This is part of my nuxt.config.js. Note that I have defined my locales in the i18n part not the modules one. Can it be the cause ?

 modules: [
    'nuxt-buefy', // Doc: https://buefy.github.io/#/documentation
    'nuxt-fontawesome',
    'nuxt-i18n',
    '@nuxtjs/onesignal',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources'
  ],
  i18n: {
    strategy: 'prefix', // default is prefix_except_default
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English'
      },
      {
        code: 'fr',
        iso: 'fr-FR',
        name: 'Français'
      },
      {
        code: 'ja',
        iso: ' ja-JP',
        name: '日本語'
      }
    ],
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected'
    },
    vueI18nLoader: true,
    // locales: ['en', 'fr', 'ja'],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      silentFallbackWarn: true,
      messages: {
        en: {
          language: 'English'
        },
        fr: {
          language: 'Français'
        },
        ja: {
          language: '日本語'
        }
      }
    }
  }

edit: I tested putting locales in the modules part same problem it is still undefined edit2: I copy/pasted the i18n part on your sandbox it also works…