After creating a CLI project, I need to add a Modal dialog, after a bit of searching I found what seems to be a good example at Create Reusable MODALS Using VUE JS, by Shmoji . The tutorial is well written and there is a YouTube as well.

In the modual.service.js file the following code exists:

import Vue from 'vue';

export default new Vue({
   methods: {
   open(component, props = {}) {
      return new Promise((resolve, reject) => {
      this.$emit('open', { component, props, resolve, reject });
      });
    }
  }
})

Here is where I get the error that reads:

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

It is pointing to the second line of code, export default new Vue({

In my main.js file, I already create Vue so it does not make sense to me why the modal author is trying to overwrite the Vue that already exists?

//main.js
import { createApp, reactive, computed, VueElement } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/styles.css'
import moment from 'moment'
const app = createApp(App).use(router)
app.config.globalProperties.$moment=moment;
app.mount('#app')

Seems to me the global open method needs to be included in main.js but not sure how that is done or how to get around the above error if the modal service open method stays in its own file?