onUpdated не вызывается с vuejs 3 с функцией рендеринга

Я столкнулся с проблемой использования хука жизненного цикла onUpdated в Vuejs3 Composition API. Он не вызывается при обновлении реактивного значения. Я воспроизвел проблему с очень простым приложением. Он имеет один дочерний компонент:

<script setup lang="ts">
import { h, ref, onUpdated } from 'vue'
const open = ref(false)
const toggle = () => {
 open.value =!open.value
}
defineExpose({ toggle })
onUpdated(() => {
 console.log("Updated")
})
const render = () =>
 open.value? h(
 'DIV',
 "Child Component"
 ):
 null
</script>
<template>
 <render />
</template>

Затем этот компонент используется приложением:

<script setup lang="ts">
import { ref } from 'vue'
import Child from './components/Child.vue'
const menu = ref(null)
</script>
<template>
 <main>
 <button @click="menu.toggle()">Click Me</button>
 <Child ref="menu" />
 </main>
</template>
<style>
</style>

Но когда кнопка нажата в приложении, несмотря на то, что отображается текст «Дочерний компонент», доказывающий, что функция рендеринга вызывается, обратный вызов onUpdated не выполняется.

Это должно быть как-то связано с тем, как вызывается функция рендеринга, или с условным рендерингом, потому что, если вместо этого я использую v-if в шаблоне, он работает нормально. Но в моем случае мне нужна явная функция рендеринга.

Кто-нибудь может помочь?

Решение проблемы

Вы должны использовать реактивный вместо ref, если хотите, чтобы он был реактивным