Vue의 반응형과 동적 프로퍼티 추가

Vue에서는 속성의 추가 제거를 감지할 수 없습니다.

let vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 은 반응형입니다.

vm.b = 2
// `vm.b`은 반응을 감지하지 못합니다.

Vue는 루트 수준의 반응성 속성을 동적으로 추가 할 수 없으므로
모든 루트 수준의 반응성 데이터 속성을 빈 값으로라도 초기에 선언하여 Vue 인스턴스를 초기화해야합니다.

또한 선언된 Object에 동적으로 프로퍼티를 추가해줄 경우 변화를 감지하지 못하고 렌더링도 진행되지 않습니다.

let vm = new Vue({
  data: {
    obj :{a: 1}
	// `obj.a` 은 반응형입니다.
  },
  methods:{
  setProperty(){
    this.obj.b = 2;
    // `obj.b`의 변화를 감지하지 못합니다
    this.obj.b = 3;
    // `obj.b`의 변화를 감지하지 못합니다.
  }
})

이러한 경우에는 this.$set(this.obj, 'b', 2)를 사용할 수 있습니다.