I’m working in a legacy project where we have both Vue 3 (migrated from Vue2) and jQuery.

I have wrapped some form fields within Vue components, like this:

Outlet.vue

<template>
  <div :class="`form-group outlet-field step-${step}`">
    <label class="label-name">
      {{ label }}
      <tooltip :required="required" :help="help" />
    </label>
    <select
      :name="name"
      :required="required"
      :disabled="isSelectDisabled"
      @change="onSelectionChange"
    >
      <option
        v-for="choice in filteredChoices"
        :value="choice.value"
        :key="choice.value"
      >
        {{ choice.label }}
      </option>
    </select>
  </div>
</template>

<script>

export default {
  name: "Outlet",
  props: ["id", "name", "label", "choices", "required", "step", "help"],
  data() {
    return {
      filteredChoices: [],
    };
  },
  mounted() {
    console.log('mounted');
  },
  methods: {
      // Some methods here
  },
};
</script>

I have few more similar components: Zip.vue, Datepicker.vue, etc.

The components are working fine when imported and loaded from the beginning, but I encountered problems when I render an entire form from the server async.

The request of my front-end app starts in form.js:

const formWrapper = $('#ajax-form-wrapper');
formWrapper.hide();
$.ajax({
    url: 'url-to-server',
    success: function (response) {
        formWrapper.html(response.form);
        formWrapper.show();
        // Load Vue components that are included within response.form markup
    }
});

Basically, server responds with form key and its value is an entire form with different fields (regular HTML fields and Vue components as fields).
Ex.

'form' => '<div>
    <input type="text">
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <zip></zip>
    <outlet></outlet>
   ...
</div>

At the moment, I can see only the regular form fields from the entire fields, while the Vue components are not rendered, but only stored in DOM with their original Vue name (

The main Vue file which initializes Vue, is in another file: app.js, but I don’t think this is relevant.

Important. These form is rendered in a modal, so that’s why I want to lazy-load these fields/Vue components only when needed. Therefore, I probably need to destroy these components once the modal is closed, right?

I read about using defineAsyncComponent method, but still, the Vue components are not being rendered and also don’t get any error.

Any hints are welcome. Thanks