Vue.JS reactivity issues with async components - vue.js

Question

I have to build a Vue.JS application that displays some components that are unknown at the Webpack compilation time. Indeed, components to load will depend on customer configuration and on modules loaded on the server side.
The solution I was thinking of was to create a JavaScript compiled file for each of those components and to load them in the main component thanks to the defineAsyncComponent method:
let child = defineAsyncComponent({
loader: () => import(/* webpackIgnore: true */ 'http://localhost:8000/build/myExternalComponent.js'),
loadingComponent: () => 'Loading...',
errorComponent: () => 'Error',
delay: 200,
timeout: 3000,
});
Everything seems to work nicely… Expected when those external components have to be refreshed because one of its references changed. Here is an example :
Initial sate of my POC
On this page, we can see two Vue.JS components that are almost the same. Bof of them hold a reference on a variable that is displayed on the “Counter : x” line, and can be increased when we click on the “increment” button. The host one is directly mounted in a DOM element of my page in a script loaded in its head ; and the child is loaded asynchronously from the host and displayed inside it. The child also holds a prop that contains the counter value of the host component and display it on the “Parent counter: x” line.
Now, if we click on the “Increment” button of the child component, nothing is updated in the DOM of the webpage. :(
If we update child values, no changes are visible
But if we click on the one in the host component, both host and child component are updated.
If we update host values, both components are refreshed
If I remove the prop on the parent counter in the child, the child component is never updated anymore, even when the parent changes… It thus looks like Vue.JS is not triggering its rendering process when a reference for a child changes, but if someone else triggers it, the rendering is correct.
The proof of concept that illustrates my issue is available here. You should be able to experiment it easily with this repo.
Here are some samples of the source code of the repo.
Webpack configuation (main parts)
[…]
module.exports = {
mode: 'development',
entry : {
'host': './entries/host.js',
'child': './entries/child.js',
},
experiments: {
outputModule: true,
topLevelAwait: true,
},
output : {
path: path.resolve(__dirname, 'public', 'build'),
publicPath: '/build/',
filename: '[name].js',
library: {
type: 'module'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
devtool: 'source-map',
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'__VUE_OPTIONS_API__': true,
'__VUE_PROD_DEVTOOLS__': false,
}),
new ModuleFederationPlugin({
shared: {
vue: {
singleton: true
}
}
}),
]
}
Host component implementation
<script setup>
import {defineAsyncComponent, ref} from "vue";
let child = defineAsyncComponent({
/**
* In the real application, the component location will be generated dynamically at the execution depending on
* customer configuration.
*/
loader: () => import(/* webpackIgnore: true */ 'http://localhost:8000/build/child.js'),
loadingComponent: () => 'Loading...',
errorComponent: () => 'Error',
delay: 200,
timeout: 3000,
});
const counter = ref(0);
const increment = () => counter.value++;
</script>
<template>
<div>
<h2>In host component.</h2>
<p>Counter : {{ counter }}</p>
<p #click="increment">Increment</p>
<hr />
<component :is="child" :parentCounter="counter" />
</div>
</template>
Child component implementation
<script setup>
import { ref, defineProps } from 'vue';
defineProps({
parentCounter: Number
})
const counter = ref(0);
const increment = () => counter.value++;
</script>
<template>
<div>
<h2>In child async component</h2>
<p>Counter : {{ counter }}</p>
<p>Parent counter: {{ parentCounter }}</p>
<p #click="increment">Increment</p>
</div>
</template>
Does anyone have a clue about what I am doing wrong?