经常看到框架里使用h函数动态创建组件，可自己使用时发现数据无法绑定，我使用的代码如下

{
  span: 6,
  label: "区",
  path: "groupId",
  component:  h(NSelect, {
    options: groupIdOptions.value,
    value: modalRef.value.groupId,
    "onUpdate:value": (value: string) => modalRef.value.groupId = value
  })
}

  <n-form-item-gi v-for="option in commonOptions" :key="option.path" :span="option.span"
                          :label="option.label"
                          :path="option.path">
            <component :is="option.component"/>
          </n-form-item-gi>

组件可以正常生成，可当外部改变其依赖的值如modalRef.value.groupId却发现组件的value并没有变化，不断试验后发现，代码变为如下后成功实现了生成组件的数据绑定：

{
  span: 6,
  label: "区",
  path: "groupId",
  component: () => h(NSelect, {
    options: groupIdOptions.value,
    value: modalRef.value.groupId,
    "onUpdate:value": (value: string) => modalRef.value.groupId = value
  }

<n-form-item-gi v-for="option in commonOptions" :key="option.path" :span="option.span"
                          :label="option.label"
                          :path="option.path">
            <component :is="option.component()"/>
          </n-form-item-gi>

可以看到typescript里component变成了一个方法，而在html里调用函数来获取is的属性值，这时候代码生效。

不知道具体原因，猜测是直接渲染好vnode在利用v-for循环生成会导致vnode不在监听范围内。