Vue component not rendering in production build

I have this Filter code in which @vueforms/multiselect component is used:

Filter.vue

<template>
<div id="testm"></div>
</template>
<script lang="ts">
import {createApp} from 'vue';
import Multiselect from '@vueform/multiselect';
export default {
  name: 'DataFilter',
  async mounted() {
   
    let parent = document.getElementById("testm") as HTMLDivElement;
    const app = createApp({
      data() {
        return {

        };
      },
      methods: {

      },
      template: `
    <Multiselect

    />`,
      components: {
        Multiselect
      }
    });

    // if (app._container) {
    //   app.unmount();
    // }
    try {
      app.mount(parent);
      alert("mounted")
    } catch (error) {
      console.error('Error mounting app:', error);
    }
  },
}
</script>

Everything works with npm run dev while doing development.

But when I create a build using npm run build and deploy the dist folder. The component is not rendering at all like it’s not even there. The alerts and everything works fine.

The above is just a sample preview (skeleton) to explain of the Filter.vue some syntax errors might be there. Please ignore them.

If I add the component itself in the <template> like:

<template>
<Multiselect />
</template>

Then the component is rendered properly after build. I have spent many days on this issue, but not able to find solution (which works for me) regarding it.

Can you please tell what am I missing or how to fix this?