Vue3数据更新但是Dom不更新(dom更新不及时)已解决

近期搬砖过程中第一次用到vue3遇到了不少阻碍所以记录一下

数据从接口返回并获取，但是dom没有及时更新。解决是解决了，但是原理还没搞懂，希望有大佬能解答一下，感谢！

一开始需要渲染的数据是这么写的：

let listData = reactive(
  [
    {
      name: "总数",
      type: "",
      value: 0,
    },
    {
      name: "类型一",
      type: "1",
      value: 0,
    },
    {
      name: "类型二",
      type: "2",
      value: 0,
    },
  ],
);

初始化dom渲染没问题，控制台并没有报错，但是从接口获取到数据赋值之后dom并没有更新，三个种类的value还是0。切换条件之后接口返回 新数据并赋值，但是dom竟然渲染的是 上一次 接口返回的数据。

后来把代码改成这样记好了，实时数据返回赋值之后能实时渲染到dom上了：

let listData = reactive(
 {
 	list:  [
	    {
	      name: "总数",
	      type: "",
	      value: 0,
	    },
	    {
	      name: "类型一",
	      type: "1",
	      value: 0,
	    },
	    {
	      name: "类型二",
	      type: "2",
	      value: 0,
	    },
	  ],
 }
);

等于是把数组包裹在一个响应式对象中