The Babel-Polyfill duplicate while integrating widget on Vue website

[Sparo]

Hi all,

I am having a problem with integrating widget I have created into a website that is also in the Vue environment.

I am trying to isolate widget but I am not sure how I should proceed with this.

this is pseudo-code I am using for integration at the website itself:

in the page page.vue file:

<template>
    <div ref="wrapper"></div>
</template>

... load script file ...
... load style file ...

in the page page.js file

...
   mounted: function () {
        this.addWidget();
    },
...
    methods: {
        addWidget: function () {
            if (window && window.document ) {
                const widgetComponent = document.createElement('widget-component');
                this.$refs.wrapper.appendChild(widgetComponent);

                var style = document.createElement('style');
                style.rel = 'stylesheet';
                style.href = ' ... /app.css';

                document.head.append(style);

                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = ' ... /app.js';

                document.head.append(script);
            }
        }
    }
...

main.js entry file of the widget itself (widget app is created with the vue-cli so most of the webpack stuff is default except vue-custom-component config and some entry point file path)

import Vue from 'vue';
import App from './components/App/App.vue';
import router from './router';

import DebouncePlugin from './plugins/debounce';
import StoragePlugin from './plugins/storage';
import ApiPlugin from './plugins/api';
import EventBus from './plugins/eventbus';

import VueCustomElement from 'vue-custom-element';
import 'document-register-element';

Vue.config.productionTip = false;

// add plugins
Vue.use(DebouncePlugin);
Vue.use(StoragePlugin);
Vue.use(ApiPlugin);
Vue.use(EventBus);
Vue.use(VueCustomElement);

App.router = router;
Vue.customElement('widget-component', App);

Error in Website console:

index.js:10 Uncaught Error: only one instance of babel-polyfill is allowed
    at Object.<anonymous> (index.js:10)
    at Object../node_modules/babel-polyfill/lib/index.js (index.js:28)
...

I also have to note that widget is working perfectly fine in dev mode, and while integrating it into the plain HTML page.

So this must be something related to the double Vue environments... my guess... Is there a way to a namespace or isolate widget fully from environment I am integrating it in?

Couple of ideas was that I should somehow detect and disable babel-polyfill in runtime or something like that... or use some polifill.io, but first I wanted to make sure that the current setup is done properly...

if you have any comments or suggestions I would appreciate it?