Version

3.0.4

Reproduction link

https://jsfiddle.net/posva/km2qpwx7/

Steps to reproduce

如何处理层级较深的对象，以下方式不生效？

<template>
  <div>{{ obj?.a?.b?.c }}</div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, computed, watch } from 'vue';

  export default defineComponent({
    setup() {
      let obj;

      const fetchData = () => {
           Promise.resolve(() => {
               obj = reactive({
                   a: {
                        b: {
                           c: 1
                       }
                   }
               })
           })
      }

      onMount(() => {
          fetchData()
      })

      return {
        obj
      };
    },
  });
</script>

What is expected?

监听到对象内所有属性的变化

What is actually happening?

无法监听到对象内属性

Read https://new-issue.vuejs.org/?repo=vuejs/vue-next&lang=zh-cn#why-repro and provide a working reproduction

And open issues in English, thank you.