Hello Community,
Has anyone tried to create Modal with Vue??? I am facing a technical problem while creating one.
What I tried to do is to create an app at location ticket_top_navigation . When the user clicks it, a Modal will be shown. In this Modal , the user can see a login form, and when he/she login, he/she will see a table containing some basic data in this Modal . I implemented that with a combination of Vue Version 2 template (generated by Vue Cli) and the default app template (generated by fdk create).
The problem is that the Vue elements cannot be displayed in the Modal after the Vue instance is mounted, or it just takes forever to render the login form in the Modal .
I wonder if Modal can be used with Vue rendering, and if there is problem with my Vue instance mounting 
Here is the main.ts file to show how my code is for creating the Modal and mounting the Vue instance:
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
const vm = new Vue({
store,
render: (h) => h(App),
created() {
console.log("Created");
},
mounted() {
console.log("Mounted");
},
});
export let client;
function onAppActivate() {
client.interface
.trigger("showModal", {
title: "Basic Data Modal",
template: "index.html",
})
.then(function (data) {
vm.$mount("#app");
})
.catch(function (error) {
console.error(error);
});
}
function handleErr(err) {
console.error(`Error occured. Details:`, err);
}
document.onreadystatechange = function () {
function renderApp() {
const onInit = app.initialized();
function getClient(_client) {
client = _client;
client.events.on("app.activated", onAppActivate);
}
onInit.then(getClient).catch(handleErr);
}
if (document.readyState === "interactive") renderApp();
};
Any advice would be appreciated.