后台返回数据赋值异步问题

问题遇到的现象和发生背景

后台返回的数据赋值给变量时，变量打印出来还是空值

```javascript
let tableData= ref([])
let searchobj: tableSearch = reactive({
  search: "",
  size:20
})
async function query(data?: any) {    
  let rst = await request.get("/api/hlfs", { params: data || searchobj })
  if (rst.data) {
    tableData.value = rst.data
      return rst.data
  }
}



onMounted(() => {
  query()    
}) 
// 表单的数据
const formState: UnwrapRef<FormState> = reactive({
      search: ''
});
      let highlight = ref([])
      let descriptionLight=ref([])
      let templateLight=ref([])
const handleFinish: FormProps['onFinish'] = (values: any) => {
  query(formState)
      console.log(tableData.value);  
      highlight.value=tableData.value.map((item:any, index: any) => {
        if (item._highlight) {
          return item._highlight
        }
        })

###### 运行结果及报错内容 
运行结束后点击第一次搜索打印的还是原数据，第二次点击的时候才是查询出来的数据

尝试了很多办法都没法解决，请各位帮帮忙看一下什么问题

同异步的概念还是没有搞清楚；
第一次是原数组的原因就是接口请求是异步的

使用async和await解决呀，你可以看一下我的博客哟