我无法在Vue 3脚本设置中显示对象。我使用了参考变量、React变量和标准变量，但所有场景都不成功。
我希望将getDetail请求的响应反映到屏幕上。getDetail异步获取这些数据。

ref（）用法

<script setup>
let movie = ref([])

const getMovieData = async ()=> {

try {
const data =  await getDetail('movie', route.params.id)
movie.value.push(data)
}
catch (e){
console.log(e)
}

}
getMovieData()
</script>
<template>

<h1>{{movie[0].original_title}}</h1>

</template>

我可以在此用法中显示数据，但出现这些错误

reactive（）用法

<script setup>
let movie = reactive({
  data:null
})

const getMovieData = async ()=>{
  try {
    const data =  await getDetail('movie', route.params.id)
    movie.data = data
  }catch (e){
    console.log(e)
  }
}
getMovieData()
</script>

<template>
<h1>{{movie.data.original_title}}</h1>
</template>

在此用法中，我可以显示数据，但得到类似的错误

标准变量用法

<script setup>

let movie

const getMovieData = async ()=>{
  try {
    const data =  await getDetail('movie', route.params.id)
    movie =data
  }catch (e){
    console.log(e)
  }
}
getMovieData()
</script>

<template>
<h1>{{movie.id}}</h1>
</template>

在这种用法中，数据不会出现在屏幕上，因为影片对象是异步形成的。
如何在屏幕上以最正确的方式显示此对象而不出现错误？