Fancybox в Vue веб-компонент

Question

Я новичок в VueJS.

Я сделал компонент Vue, и он работает. Он просто показывает кнопку, и, как только вы нажмете, он вызовет всплывающее окно Fancybox; и стиль поддерживается Bootstrap. Fancybox был инициирован встроенным атрибутом данных (например, data-fancybox).

И Fancybox, и Bootstrap импортированы в основной файл. js вверху. Вот фрагмент кода.

import Vue from 'vue';

import jquery from 'jquery';
window.$ = window.jQuery=jquery;
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
require('@fancyapps/fancybox');

Но, когда я обертываю это с помощью web-component-wrapper, ничего не работает. Вот полный основной код. js.

import Vue from 'vue';

import jquery from 'jquery';
window.$ = window.jQuery=jquery;
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
require('@fancyapps/fancybox');

Vue.config.productionTip = false

// below is for Vue component use
// import App from './App.vue'
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

// below is for web component build use

import wrap from '@vue/web-component-wrapper';
import MediaLibrary from './components/MediaLibrary';

const WrappedElement = wrap(Vue, MediaLibrary);

window.customElements.define('media-library', WrappedElement);

Я занимался этим целый день. Спасибо, если кто-нибудь может пролить свет на это.

Спасибо, ребята! Gary