vue3 await获取数据并显示在页面上的问题

//helloworld.vue
<template>
  {{ result }}
</template>

<script setup lang="ts">
import axios from "axios"
const result = await axios.get("/test") //返回 {id:0}
console.log(result)
//下面这种写法也试过了
//let result = reactive({})
//result.value =  await axios.get("/test")
</script>

预期在页面上显示响应内容，但页面上始终为空，控制台打印有数据。
查来查去实在不知道自己漏看了什么导致vue3里这样写不行，vue2在create里写类似的逻辑是可以的正常在页面上显示的。
参考了几个项目也没有得到想知道的知识点，想学习vue3直接被卡在这里动弹不得。
求指惑。

https://blog.csdn.net/WangYC_/article/details/115730233

在app.vue中加上 suspense标签

  <suspense>
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  </suspense>

await 只能在 async function 异步函数中使用，要这样

import axios from "axios"
(async function () {
    const result = await axios.get("/test") //返回 {id:0}
    console.log(result)
})();