将观察者添加到动态创建的对象

Question

在组件工作的某个时间点，它的一个来自原语的值变成了一个对象。这个对象是动态分配的带有值的字段。有必要跟踪这些值的变化。

重现问题的简化代码：

const fields = ['name', 'age'];

const app = new Vue({

  el: '#app',

  data() {

    return {

      value: '',

    };

  },

  watch: {

    value: function() {

      console.log('Global: Value changed');

    },

  },

  mounted() {

    this.value = '111';

    this.value = {};

    fields.forEach(field => {

      this.value[field] = '';

    });

    this.$watch('value', callback, { deep: true });

    function callback() {

      console.log('Callback: Value changed');

    }

    this.$nextTick(() => {

      this.value.name = 'Max';

      this.value.age = 30;

      console.log(this.value)

    });

  },

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<div id="app"></div>