建议先看下这篇：简析vue中的声明式渲染&响应式，ref()&reactive()-CSDN博客

渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。

甚至，你在console打印出来，的确有值，为什么页面没有加载出来？因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。

解决的办法：赋予响应性即可，使用ref()或者reactive()。

注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。

<template>
  <el-tree :data="resData" :props="defaultProps" />
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue'

const resData = ref<Tree[]>([]) // 赋予响应性
const getData = async () => {
  axios.get('/product/category/treeList')
    .then(response => {
      resData.value = response.data.tree
    });
  console.log(resData)
}

getData() // 记得一定要调用，上面是声明

interface Tree {
  name: string
  children?: Tree[]
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
</script>

或者：

<template>
  <el-tree :data="resData" :props="defaultProps" />
</template>

<script lang="ts" setup>
import axios from 'axios';
import { reactive } from 'vue'

const resData = reactive<Tree[]>([]) // 赋予响应性
const getData = async () => {
  axios.get('/product/category/treeList')
    .then(response => {
      for (let i = 0; i < response.data.tree; i++) {
        resData.push({
          name: response.data.tree[i].name,
          children: response.data.tree[i].children
        })
      }
    });
  console.log(resData)
}

getData() // 记得一定要调用，上面是声明

interface Tree {
  name: string
  children?: Tree[]
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
</script>

很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。

总而言之，建议使用ref()。