Cannot pass vue-i18n object into web-component

I have a component that uses vue-i18n and works as a normal vue component.

When creating web component I had TypeError: this is undefined error with typescript, then created the component with this approach:

const layout = new ModuleLayout().$options;
Vue.customElement('my-layout', layout);

And this is my i18n object:

import messages from '@/locales/i18n.json';

export const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: messages
})

For adding i18n I tried these approaches but none works:

const layout = new ModuleLayout({ i18n }).$options;

Vue.customElement('my-layout', layout);

const layout = new ModuleLayout().$options;
layout.i18n = i18n;

Vue.customElement('my-layout', layout);

In both ways I have these errors:

TypeError: "this.$i18n is undefined"
TypeError: "i18n is undefined"

[rostamiani]

it works , but with a typescript error:

 Property 'options' does not exist on type 'Function'.

Update: While serving, after recompiling this.$i18n is undefined error appears again.

[karol-f]

Hi, it seems to work like this. Please let me know if it will work for You - https://codesandbox.io/s/vue-template-72o5z?file=/src/main.js

import Vue from "vue";
import vueCustomElement from "vue-custom-element";
import VueI18n from "vue-i18n";
import Test from "./components/Test.vue";

Vue.use(vueCustomElement);
Vue.use(VueI18n);

Vue.config.productionTip = false;

const i18n = new VueI18n({
  locale: "en",
  messages: {
    en: {
      message: {
        hello: "hello world"
      }
    }
  }
});
Test.prototype.constructor.options.i18n = i18n;

Vue.customElement("test-component", Test.prototype.constructor.options);