I have a very simple progress bar component:

<script setup lang="ts">
defineProps<{ progress: number }>();
</script>
<template>
    <div class="progress" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" :style="{ 'width': progress + '%' }"></div>
    </div>
</template>

I created these components dynamically using h because I need to generate them and I intertwine them with other components in a single big elements.

I have something like that:

import ResultProgressLine from './ResultProgressLine.vue';
import { h, ref, type VNode } from 'vue';

const contentRows = ref<VNode[]>([]);
const contentProgress: Map<number, VNode> = new Map();

// create the component
contentProgress.set(id, h(
    ResultProgressLine, {
        "progress": 0
    })
);
contentRows.value = contentRows.value.concat(contentProgress.get(id));

I then mount it like so:

<component v-for="row, index in contentRows" :key="index" :is="row"></component>

How can I then dynamically update the progress props of the ResultProgressLine dynamically?

Note: The <component> binds heterogeneous components, so I do not think I can use pass the ref there.

What I tried so far:

• passing a Ref instead of the value to the props in h

const progress = ref(0);
h(ResultProgressLine, { progress: progress });

• updating the props with stuff like this

contentProgress.get(id)!.props.progress = 50;
contentProgress.get(id)!.component?.update();