Vue computed属性能否配合外部对象使用？为何示例代码未触发更新？

你遇到的页面不更新的问题，不是computed不能配合外部对象使用，是两层逻辑叠加的结果：

纯JS逻辑本身的问题 #

哪怕把这段代码完全脱离Vue跑在浏览器控制台里，也实现不了2秒后值变化的效果：

• _data初始化的时候，auth: _auth 只是把当时_auth存的字符串值"123"做了值拷贝塞进对象里。字符串是JS基本类型，没有引用绑定关系，后面setTimeout里把独立变量_auth改成"456"，根本不会影响_data.auth里存的"123"。
• 就算你把setTimeout里的逻辑改成直接赋值_data.auth = "456"，这步也只是改了个普通原生对象的属性，没有任何观测逻辑能捕获这个变化。

Vue响应式的边界 #

Vue的响应式追踪是有明确范围的：只有被Vue响应式系统（Vue2靠Object.defineProperty递归劫持、Vue3靠Proxy代理）包装过的对象，它的属性变化才能被监听到，进而触发computed重算、视图更新。
你直接从外部模块导入原生普通对象，把它作为computed的返回值，这个对象从来没进过响应式系统的观测范围，哪怕你手动改它的属性，Vue也感知不到，自然不会触发页面更新。computed的依赖收集也只会追踪求值过程中访问到的响应式属性，对普通原生对象的属性访问根本不会建立依赖关系。

Vue2 环境下 #

1. 先修正JS层的逻辑：把setTimeout里的赋值目标从独立的_auth变量改成_data.auth本身，别搞两个独立变量的无效绑定。
2. 把导入的外部对象纳入响应式系统的观测范围，最简单的方式是在组件的data选项里把它挂成响应式属性，让Vue自动完成属性劫持：

import { _data } from "./data"
export default {
  data() {
    return {
      // Vue会对返回对象的所有属性做响应式劫持，后续修改属性就会触发更新
      outerData: _data
    }
  },
  computed: {
    // 这里其实可以直接简化成返回outerData，不需要额外套逻辑
    displayAuth() {
      return this.outerData.auth
    }
  }
}

注意：Vue2下不能在对象初始化完成后，给这个外部对象直接加不存在的新属性，否则新增的属性不会被劫持，还是没法触发更新。

Vue3 环境下 #

更简单的方式是直接在外部模块里，用reactive把普通对象转成响应式代理，全局共享这个引用：

// data.js 文件
import { reactive } from "vue"
// 直接把对象包装成响应式，模块内导出这个代理引用
export const _data = reactive({
  auth: "123"
})

setTimeout(() => {
  // 修改响应式对象的属性，会被自动追踪
  _data.auth = "456"
}, 2000)

组件里直接导入这个响应式对象使用就行，连computed都不用套，访问属性的时候会自动建立依赖追踪，属性变化时视图自动更新。

computed完全可以配合外部对象使用，核心前提是：你在computed中访问的属性，必须是被响应式系统代理过的属性。如果只是返回一个没有响应式的普通对象，不管是外部导入的还是组件内部定义的，都没法触发自动更新。

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