Vue 3 dynamically loaded component hooks not called

Question

I have this (shorten for the 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 (let's say) NamedExport and served on demand as a base64 encoded string to be imported client-side.

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

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

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

})

then, the result is bound to:

<component :is="component" />

It works well, except two things, one of these is that hooks are not called (onMounted in this case), the other being that styles importer is not called either.

Is it an expected behavior, or do I miss something? Is it the <script setup> way of writing the component that is responsible?

Answer 1

It appears that I had two instances of Vue running (one bundled with my package, with rollup, and one imported in the script itself), and for an unknown reason, none of the two was calling hooks.

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