Dynamic Modal $vfm not working Vue3

[odion-cloud]

Version vue-final-modal: ^3.4.6 vue: ^3.4.34

windows 10

Steps to reproduce my code in vfmplugin.js

import { vfmPlugin } from 'vue-final-modal';

// Export the plugin directly for use in `app.js`
export { vfmPlugin };

my app.js

import { createApp } from 'vue';
import App from './views/layouts/Layout.vue';
import router from './libs/router';
import { vfmPlugin } from './libs/vfmplugin'; // Import vfmPlugin
import {openModal,closeModal} from './function/openModal'

const app = createApp(App);
// Global mixin helpers
app.mixin({
  methods: {
    openModal: openModal,
    closeModal: closeModal,
  },
});

app.use(router);
app.use(vfmPlugin); 
// Mount to the <app> element
app.mount('app');

my code in openModal.js

import { $vfm } from 'vue-final-modal';
export const openModal = (cname,param) => {

  const com = () => import(`../views/viewmyntebot/pages/others/${cname}.vue`) 
    $vfm.show({component: com,
    bind: {
        params: param
      }},param)
}

export const closeModal = (name) => {
  if(name) {
    $vfm.hide(name)
  }else {
    $vfm.hideAll()
  }
}

my Layout.vue

<template>
 <div class="main">
    <div class="main-container sub-container-bg">
     <main class="body-container">
       <router-view></router-view>
     </main>
     <modals-container style="position: fixed;z-index:100;"></modals-container>

    </div>
  </div>

  </template>

my code in pages/partials/playlist/Index.vue

<template>
    <vue-final-modal name="playlistHome" v-slot="{ close }" v-bind="$attrs" v-on="$listeners" :hide-overlay="true">

        <div class="modal" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
    </vue-final-modal>
  </template>

when i click @click="openModal('partials/playlist/Index')" it returns

app.js:8254 [Vue warn]: Invalid VNode type: undefined (undefined) 
  at <Com key= Symbol(dynamicModal) params=undefined modelValue=true  ... > 
  at <ModalsContainer style= {position: 'fixed', z-index: '100'} > 
  at <Layout>

What is Expected? No warnings and modal is shown