vue3 深度响应式是否正常测试，以select options作为例子测试，select options后赋值是否不能正常显示选中的label

<template>
  <div class='box'>
    <template v-for="(ditem, dindex) in data1" :key="dindex">
      <el-select v-model="ditem.value" clearable filterable>
        <el-option v-for="item in ditem?.a?.b?.c" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>

  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, nextTick, PropType } from 'vue';


const data1 = ref<any[]>([])



setTimeout(() => {
  const obj1 = {
    value: "2",
    a: {
      b: {
        c: null
      }
    }
  }
  data1.value = [obj1]
}, 500)
setTimeout(() => {
  const optionsData = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' }
  ]
  //这里赋值还是可以响应式，说明vue3的深度响应式还是挺好的，先赋值select的value，等这时候再赋值options的循环选项，页面还是响应式正常，不会只显示select的值，而是值对应的label
  data1.value[0].a.b.c = optionsData



}, 3000)

</script>
<style lang='scss' scoped>
.box {
  width: 300px;
}
</style>

结论

经测试，宏任务的异步后赋值options，vue3还是正常显示正常响应式。