Nuxt.js Composition API嵌套reactive对象更新后视图不响应问题

问题根因 #

你遇到的响应失效核心原因是外层root是普通JavaScript对象，并非响应式实例，仅root.data指向的对象是reactive生成的响应式对象。你之前的两种更新方式都是直接替换root.data的引用，普通对象的属性变更不会触发Vue的响应式更新通知，因此页面不会同步刷新。

原有写法的问题 #

• $nuxt.$set是Vue2用于给响应式对象新增属性的兼容API，在Composition API场景下不需要使用，且对普通对象root调用该API不会产生响应式效果。
• Object.assign生成的是全新普通对象，直接赋值给root.data后，root.data的指向从原响应式实例变为普通对象，后续修改也无法触发响应，同时普通对象root的属性变更无法被响应式系统捕获。

解决方案 #

方案1：将整个root声明为响应式对象（最推荐）

直接把整个root用reactive包裹，嵌套属性的更新、整体替换子属性都能正常触发响应式更新：

<template>
 {{ root.data.name }}
</template> 
<script>
   import { defineComponent, reactive } from '@nuxtjs/composition-api'
   export default defineComponent({
       setup() {
          // 整个root声明为响应式
          const root = reactive({
             data: {
                name: 'default'
             }
          })
          
          // 更新逻辑示例
          const update = () => {
            // 方式1：直接修改嵌套属性
            root.data.name = 'updated name'
            // 方式2：替换整个data属性也可正常触发更新
            // root.data = { name: 'updated name' }
          }

          return { root, update }
       }
   })
</script>

方案2：不修改root结构，直接更新响应式对象内部属性

如果你要保留root为普通对象的原有结构，不需要替换root.data的引用，直接修改它内部的属性即可，因为root.data本身是响应式实例：

// 直接修改响应式对象的属性，无需替换整个data
root.data.name = 'updated name'

内容的提问来源于stack exchange，提问作者Devb