Vue3在调用接口加载数据赋值给变量后，return出的变量值没变的问题

Vue3在调用接口加载数据赋值给变量后，return出的变量值没变的问题

// 表格的数据
let tableData= ref([])
let searchobj: tableSearch = reactive({
  search: "",
  // page: 1,
  // perPage:10,
  q:'category:meta'
})
async function query(data?:any){
 let rst= await request.get("/api/templates",{params:data || searchobj})
 console.log(rst.data);
 tableData.value=rst.data
}
console.log(tableData.value);

打印出来的tableData还是个空数组
试过网上的reactive，还有tableData.push方法都没实现
求指教，怎么获取

async function query(data?:any){
 let rst= await request.get("/api/templates",{params:data || searchobj})
 console.log(rst.data);
 tableData.value=rst.data
 console.log(tableData.value);
}

query函数在哪里执行的呢？