下面是我的index.vue中的代码，在选项api中：

<template>
 <div>{{userData.name}}</div>// 💗'helloworld'
 <div>{{testName}}</div>// ❌'undefined'
</template>
<script>
import {ref} from 'vue'
import axios from 'axios'

export default{
 setup(){
  const userData=ref([])
  const testName = ref('')
  oNmounted(async ()=>{
     const res=await axios({url:'/myProfile',method:'get'})
   })
   userData.value=res.data.data //here I can get the async data after the Internet time travel.

   //in other func to process the `userData` object which would be `[{name:'helloWorld',...}]
   testName.value = userData.name
   cosole.log(userData.name) //output `undefined`, but if i refer it in the template section, it works.
 }
 
 return {
  userData,
  testName,
 }
}

</script>

我想在呈现之前处理异步数据，我如何才能确保我可以获得获取的数据以在<script>部分而不是<template>部分中使用？我定义的userData是ref，在异步获取开始时，它被假定为undefined，但在异步axios之后，userData被分配给我想要的最新目标值，那么为什么它们不会相应地更新？我在此实现中遗漏了什么？