vue-reactivity-data-merge.js

// Does not work! 😕
export default {
  props: ['todo'],
  data() {
    const data = this.todo;
    data.isComplete = false;
    return data;
  },
  watch: {
    isComplete: function(value) {
      console.log(value + ' is updated');
    }
  }
}

// Does work! 😃
export default {
  props: ['todo'],
  data() {
    let data = {
      isComplete: false
    };
    data = Object.assign({}, data, this.todo);
    return data;
  },
  watch: {
    isComplete: function(value) {
      console.log(value + ' is updated');
    }
  }
}