vue computed监听不到对象

在 Vue 中，`computed` 是依赖于响应式数据的，当响应式数据发生变化时，`computed` 会自动重新计算。但是，如果对象的属性值发生变化，由于对象本身并不是响应式的，所以 `computed` 监听不到对象属性值的变化。

解决这个问题的方法是将对象转换为响应式对象。Vue 提供了一个 `Vue.observable` 方法，可以将一个普通对象转换为响应式对象。你可以使用 `Vue.observable` 方法将对象转换为响应式对象，然后在 `computed` 中监听这个响应式对象的属性值变化。示例代码如下：

import Vue from 'vue';

const obj = Vue.observable({
  name: '张三',
  age: 18,
});

export default {
  computed: {
    name() {
      return obj.name;
    },
    age() {
      return obj.age;
    },
  },
  methods: {
    changeName(newName) {
      obj.name = newName;
    },
    changeAge(newAge) {
      obj.age = newAge;
    },
  },
};

在上面的代码中，我们使用 `Vue.observable` 方法将 `obj` 对象转换为响应式对象，然后在 `computed` 中监听 `obj` 对象的属性值变化。在 `methods` 中，我们提供了两个方法 `changeName` 和 `changeAge`，用于修改 `obj` 对象的属性值。这样，当我们调用这两个方法修改 `obj` 对象的属性值时，`computed` 会自动重新计算，从而实现了监听对象属性值的变化。