vue3中createVNode中传递的prop会失去响应？

Question

VUE3中
SFC中template的props是动态的
createVNode(component,{...})是非动态的
怎么能把第二种变成动态的

child.vue

<script setup>
//child-component 子组件
import { watch } from "vue"
let props = defineProps({
    aaa: Boolean,
    bb: Object
})
watch(() => { return props.aaa }, function (newVal) {
    console.log(newVal)
})
</script>

parent.vue

<script setup>
//parent-component 父组件
import { createVNode, onMounted, reactive, ref, render } from 'vue';
import Child from './child.vue';

const foo = ref(false)
const bar = reactive({ a: 1, b: 2 })
const el = ref();
const div = document.createElement("div")

const vNode = createVNode(Child, { foo: foo.value, bar: bar });
//通过careteVnode 传递的foo不是动态的

onMounted(() => {
  el.value.appendChild(div)
})
render(vNode, div)

setInterval(() => {
  foo.value = !foo.value;
  bar.a++
}, 1000)
</script>

<template>
  <Child :foo="foo"></Child> <!--这里的子组件传递的foo是动态的 -->
  <div ref="el"></div>
</template>

Answer 1

你可以用 toRefs ：

<script setup>
//parent-component 父组件
import { createVNode, onMounted, reactive, ref, render, toRefs } from 'vue';
import Child from './child.vue';

const foo = ref(false)
const bar = reactive({ a: 1, b: 2 })
const el = ref();
const div = document.createElement("div")

const reactiveRefs = toRefs({ foo, bar })

const vNode = createVNode(Child, reactiveRefs);

onMounted(() => {
  el.value.appendChild(div)
})
render(vNode, div)

setInterval(() => {
  foo.value = !foo.value;
  bar.a++
}, 1000)
</script>

<template>
  <Child :foo="foo"></Child> <!--这样子组件传递的foo就是动态的 -->
  <div ref="el"></div>
</template>

Answer 2

我也遇到了相同的问题，使用ref响应式，子组件props 类型警告
请问最后怎么实现的