vue3，页面渲染结束后，点击按钮铜通过原生dom创建一个新的div元素，在不改原生dom创建div的情况下用css渲染这个div

vue3，页面渲染结束后，点击按钮创建一个新的div元素，这个div现在没法被css渲染，那么在不改变这种原生dom添加div的情况下，如何使用vue，叫它自动使用css渲染这个div呢？（通过vue数据绑定可以先实现，但是想学学有没有别的思路，能在不改变这种原生dom添加div的情况下实现，谢谢指点）

<script setup lang="ts">
let resultDiv !: HTMLDivElement//显示结果的元素
const showResult = function (str : string) {
  if(document.getElementById("prizeDiv")){//如果存在该元素
    document.body.removeChild(resultDiv);//移除元素
    console.log('removeChild')
  }
  resultDiv = document.createElement("div")//创建div元素
  resultDiv.id="prizeDiv"//设置元素id
  resultDiv.className = "prizeDiv"//为div设置class属性值
  if(  str !== "a"){
    resultDiv.innerHTML = "恭喜您获得"+str //显示的内容
  }else{
    resultDiv.innerHTML =str//显示的内容
  }
  document.body.appendChild(resultDiv)
}
</script>

<template>
  <div>
    <div class="header">
      <div class="play">
        <div class="box"></div>
        <p class="btn_arr">
          <input id="btn1" type="button" @click="showResult('a')" class="play_btn" value="添加">
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.prizeDiv{
  width:376px;/*设置宽度*/
  height:100px;/*设置高度*/
  line-height:100px;/*设置行高*/
  text-align:center;/*设置文本水平居中显示*/
  font-size:18px;/*设置文字大小*/
  font-weight:bolder;/*设置文字粗细*/
  color:#FFFFFF;/*设置文字颜色*/
  background-color:#666666;/*设置背景颜色*/
  opacity:0.9;/*设置不透明度*/
  position:absolute;/*设置绝对定位*/
  top:44%;/*设置元素到父元素顶端距离*/
  left:50%;/*设置元素到父元素左端距离*/
  z-index:10;/*设置元素堆叠顺序*/
  transform: translate(-50%, -50%);/*设置元素平移*/
}
</style>