Is this the right way to use Ionic4 modal in vuejs

Ionic Framework
1

I want to load a component as a modal.

Step 1: Import WorkshopDetails component that I have to load as modal and use vue.extend to create its instance

import Vue from "vue";
import WorkshopDetails from "@/components/WorkshopDetails/WorkshopDetails.vue";
var WorkshopDetailsInstance = Vue.extend(WorkshopDetails);

Step 2: Added a method to open a modal

openWorkshopInfoModal(workshop) {
            const modalController = document.querySelector("ion-modal-controller");
            modalController.componentOnReady().then(function () {
                const element = document.createElement("div");
                element.setAttribute("id", "mountContainer");
                modalController.create({
                    component: element,
                    backdropDismiss: false
                }).then(function (modalElement) {
                    modalElement.present();
                    //mount WorkshopDetails component instance in modal
                    const WorkshopDetailsInstanceObject = new WorkshopDetailsInstance({
                        propsData: {
                            workshop: workshop
                        }
                    }).$mount("#mountContainer");
                    EventBus.$on(EventConst.modalevent.closeWorkshopInfo, function (playWorkshop) {
                        modalController.dismiss();
                        WorkshopDetailsInstanceObject.$destroy(); // cleanup in component
                        WorkshopDetailsInstanceObject.$el.remove(); // remove from DOM
                        EventBus.$off(EventConst.modalevent.closeWeatherForm);
                    });
                });
            });
        }