Vue3 使用script setup的情况下，如何操作dom添加一个html元素节点

中文
#1

image
在选项式api中我可以使用这种方式添加元素节点，但使用组合式api就不行了

#2 
<template>
<div ref="root"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const root = ref() // 变量名与需要绑定的节点ref属性同名
onMounted(() => {
  if(!root.value) return
  const el = root.value
})
</script>

<template>....</template>
<script setup>
//import ...
onMounted(() => {
  const el = getCurrentInstance()?.vnode.el //当前组件的el(根)
})
</script>

documnet.querySelector()

很好奇啊，是v-if和v-for满足不了了么,要直接操作dom添加节点