I’ve 2 components ComponentA and ComponentB both are Nuxt UI Modal components. something like this:

<script setup lang="ts">
const model = defineModel({type: Boolean, default: false})
</script>
<u-modal v-model="model">
    <u-card class="flex flex-col gap-6 py-6">
      ...
      ...
    </div>
  </u-modal>

Programetically I can open modal like this.

const modal = useModal();
modal.open(ComponentA, options);

Now, I cannot instantiate multiple modal instances of same component like the following. It just keeps the 2nd instance replacing the first.

const modalA1 = useModal();
modalA1.open(ComponentA, options);

const modalA2 = useModal();
modalA2.open(ComponentA, options);

Also, using 2 different components not working. Something like this:

const modalA = useModal();
modalA.open(ComponentA, options);

const modalB = useModal();
modalB.open(ComponentB, options);

It only keeps modalB and replaces modalA.

I must use multiple modals. Although, if I nest multiple modals inside <template>...</template> they works perfectly, but not programetically.

How to solve this? Please Help.