[Vue3 + echarts] props传异步数据问题

今天用 v3+echarts 写时遇到一个难题：父组件中通过 axios 获取数据，然后在父组件中加工一下传给子组件（图表组件），子组件通过 props 接收。

问题就出在似乎异步获取数据后子组件不能通过 setup 的 props 参数正确获取处理后的数据（已经配置好了props项），数据仍然为初始的空数组[]。

然后就突发奇想写出了一个很离谱的写法，竟然还成功了，

setup() {
    let data = ref(
      (() => {
        axios
          .get("./static/data.json")
          .then((res) => {
            return res.data;
          })
          .catch((err) => {
            console.log(err.message);
          });
      })()
    );

    onMounted(() => {
      axios
        .get("./static/data.json")
        .then((res) => {
          data.value = res.data;
        })
        .catch((err) => {
          console.log(err.message);
        });
    });

    const getFromData = (keyName) => {
      let arr = [];
      data.value.forEach((item) => {
        for (const key in item) {
          if (Object.hasOwnProperty.call(item, key)) {
            if (key == keyName) arr.push(item[key]);
          }
        }
      });
      return arr;
    };
    let sleep_time = computed(() => getFromData("sleep_time"));
    let run_distance = computed(() => getFromData("run_distance"));
    let sport_time = computed(() => getFromData("sport_time"));
    let step_number = computed(() => getFromData("step_number"));
    let study_time = computed(() => getFromData("study_time"));
    let recreate_time = computed(() => getFromData("recreate_time"));
    let expense = computed(() => getFromData("expense"));
    let mood = computed(() => getFromData("mood"));
    return {
      data,
      sleep_time,
      run_distance,
      sport_time,
      step_number,
      study_time,
      recreate_time,
      expense,
      mood,
    };
  },

ref 里面写了一个立即执行函数，里面 axios 请求一下数据，然后之后 onMounted 里再请求一次，就可以了。少一步都不行，真的离谱。