<script setup>
  import { shallowRef } from 'vue';

  const deepObj = shallowRef({
    level1: {
      level2: {
        level3: {
          level4: {
            level5: {
              level6: {
                level7: {
                  level8: {
                    level9: 'Hello Ray！',
                  }
                }
              }
            }
          }
        }
      }
    }
  });

  const updateDeepObj = () => {
    deepObj.value.level1.level2.level3.level4.level5.level6.level7.level8.level9 = 'Hello Vue 3！';
  }
</script>

<template>
  <div>
    <p>deepObj：{{ deepObj.level1.level2.level3.level4.level5.level6.level7.level8.level9 }}</p>
    <button @click="updateDeepObj">Update deepObj</button>
  </div>
</template>