Vue 3 dynamically loaded component hooks are not triggered

Question

I have this (short for question) single file component (vue 3.2.31):

<template lang="pug">
.test Hello world!
</template>
<style lang="sass" scoped>
.test
  font-weight: bold
</style>
<script setup lang="ts">

onMounted(() => {
  console.log('Mounted');
});

</script>

It is bundled via vitejs, exported as (say) NamedExport, and imported on the client side as a base64 encoded string on demand.

const component = await defineAsyncComponent(async () => {

  // A module that exports multiple components.
  const module = await import(base64StringSentFromTheServer);

  // Choose one.
  return module['NamedExport']);

})

Then, the result must be:

<component :is="component" />

It works just fine , except for two things, one of which is that the hook is not called (in this case onMounted) and the other is that neither is the style importer is called.

Is this expected behavior, or am I missing something? Is <script setup> the way to write responsible components?

Answer 1

It appears that I have two instances of Vue running (one bundled with my package, with rollups, and the other imported in the script itself), and for unknown reasons, both None of the instances are running the call hook.

By removing one of the instances (actually passing vue as external in the rollup build configuration) it now works fine.