Vue3 数据延迟显示

问题

本人前端小白,学了一段时间 Vue3.

为了适配自己的笔记在写一个插件.但是中见遇到了一些问题.我也不懂这是个什么问题.

必须要点击两次查询才能够显示数据.

<template> 部分是用 Element-Plus 写的.只是简单的绑定了一下数据.

JS 部分的代码

  setup(){
    let blocks = ref()
    let sqlcode = ref("SELECT * FROM blocks WHERE\n" + "content like '%@Project-%'")

    let currentId= ""
    let attributes=ref([])
    let blocksAttrs=ref([])

    //执行SQL
    function getQueryResult() {
      sqlQuery(sqlcode.value).then(response => {
        blocks.value = response.data
        //获取其属性
        getAttr(blocks.value)
      })
    }
    //查询块的属性
    function getAttr(getBlocks){
      let block=null
      for (block in getBlocks){
        getBlockAttrs(getBlocks[block].id).then(response => {
          if (response.data.length != 0){
            attributes.value.push(response.data)
          }
        })
      }
      setDataView(attributes.value)
    }
    //将属性放入对象数组
    function setDataView(getAttributes){
      console.log("DataViewStart")
      let attr=null
      let attrs
      console.log(getAttributes)
      for(attrs in getAttributes){
        let blockAttrs={}
        for(attr in getAttributes[attrs]){
          let attrKey = getAttributes[attrs][attr].name
          let attrResult = getAttributes[attrs][attr].value
          blockAttrs[attrKey] = attrResult
        }
        blocksAttrs.value.push(blockAttrs)
      }
      console.log(blocksAttrs.value)
    }
}