如何动态更新通过h()创建的Vue组件的props？

问题背景 #

我有一个非常简单的进度条组件：

<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>

我需要将这类组件与其他组件整合到一个大容器中，因此使用h函数动态创建它们，代码如下：

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

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

// 创建组件
contentProgress.set(id, h(
    ResultProgressLine, {
        "progress": 0
    })
);
contentRows.value = contentRows.value.concat(contentProgress.get(id));

我通过以下方式挂载这些动态组件：

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

现在的问题是：如何动态更新ResultProgressLine组件的progress props？

注意：<component>绑定的是异构组件，无法直接在这里传递ref。

已尝试的方案 #

• 在h函数的props中传递Ref而非具体值

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

• 直接修改VNode的props属性

// 此方法近乎有效，但不会触发组件重新渲染，仅在下次全局渲染时更新
contentProgress.get(id)!.props.progress = 50;

内容的提问来源于stack exchange，提问作者Holt