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?

There are no console errors thrown, everything runs fine but with missing multiselect like it’s not there at all.

Concept of Filter:

Consider these specifically designed strings (each acts as a filter):

{column = 'abc'} // simple one
{{column = 'abc'}or{column2 does not contains 'xyz'}} // with and/or condition
{{{column = 'abc'}and{column2 contains 'xyz'}}or{table1col3->table2col1->table3col7 = 'def'}} // with and/or + reference

• A filter node contains min 3 multiselects (column, operator, value)
• Filter node can contain references as well like: table1col3->table2col1->table3col7 (each reference is a multi-select)
• Every filter node is connected with other using AND/OR conditions with right wrapping inside container for processing with {...}
• Unlimited number of filter nodes added with and/or with unlimited depth
• Unlimited number of reference columns can be present (Everything is repetable basically)
• All the filter suggestions are loaded using async call to backend with searchText that is either typed or selected from dropdown

I’m using div with specific classes like filterContainer and or filterNode ...etc

In the end, once the user creates a filter, I navigate the HTML with right classes and generates the above mentioned filter string and sends to backend for filteration.

Please suggestion what can be improved. The filterNodes are created by javascript functions (not on mounted method) which are triggered on button clicks (which adds filter node at the right location.)