Les hooks de composants chargés dynamiquement de Vue 3 ne sont pas déclenchés

Question

J'ai ce (abréviation de question) composant de fichier unique (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>

Il est regroupé via vitejs, exporté sous (disons) NamedExport et importé à la demande sous forme de chaîne codée en base64 côté client.

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

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

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

})

Ensuite, le résultat doit être :

<component :is="component" />

Cela fonctionne très bien , à l'exception de deux choses, dont l'une est que le hook n'est pas appelé (dans ce cas onMounted) et l'autre est que l'importateur de style n'est pas appelé non plus.

Est-ce un comportement attendu ou est-ce que j'ai raté quelque chose ? Est-ce que <script setup> est la manière d'écrire des composants responsables ?

Answer 1

Il semble que j'ai deux instances de Vue en cours d'exécution (l'une fournie avec mon package avec des rollups, l'autre importée dans le script lui-même), et pour des raisons inconnues, aucune des deux instances n'exécute la connexion d'appel.

En supprimant l'une des instances (en passant en fait vue comme externe dans la configuration de build du rollup), cela fonctionne bien maintenant.