vue使用h()没反应

vue使用h()没反应，我不知道什么情况，但是下面的是可以的

<template>
  <!-- 已经存在的 div -->
  <div id="target">3333</div>
  <button @click="fill">点我给 div 赋值</button>
</template>
<script setup>
import { h, render } from 'vue'
function fill () {
  // 1. 用 h 创建 VNode
  const vnode = h('div',
    { style: { color: 'red', fontSize: '20px' } },
    `现在时间：${new Date().toLocaleTimeString()}`
  )
  // 2. 把 VNode 渲染到 #target（会覆盖旧内容）
  render(vnode, document.getElementById('target'))
}
</script>

这个也可以

<template>
  <div class="container">
    <!-- 触发按钮 -->
    <button @click="handleCreateDiv">点击生成紫色文字</button>
    <!-- 渲染动态生成的 div（初始为 null，点击后显示） -->
    <component :is="dynamicDiv" />
  </div>
</template>
<script setup>
import { h, ref } from 'vue';
// 存储动态生成的 div 的 VNode（初始为 null）
const dynamicDiv = ref(null);
// 按钮点击事件处理函数
const handleCreateDiv = () => {
  // 使用 h() 生成 div 的 VNode
  dynamicDiv.value = h('div', {
    // 设置文字颜色为紫色（支持 CSS 样式对象）
    style: { 
      color: '#800080',  // 紫色（也可以用 'purple'）
      fontSize: '18px',  // 可选：设置字体大小
      margin: '10px 0'   // 可选：设置边距
    },
    // 可选：添加类名（如果需要额外样式）
    class: 'custom-text'
  }, [
    // div 的子节点（显示的文字内容）
    '这是一行紫色的文字！'
  ]);
};
</script>
<style scoped>
/* 可选：自定义样式（如果需要） */
.container {
  padding: 20px;
}
.custom-text {
  font-weight: bold;  /* 加粗 */
  text-align: center; /* 居中 */
}
</style>