중첩된 데이터 watch - deep

Vue는 배열이나 객체를 watch할 때, 속성 내부가 변경되었다고 생각하지 않는다.

Vue에게 변경을 watch할 때 속성 내부를 검사하길 원한다고 알려줘야 한다.

 

다음과 같이 deep을 true로 설정하고 handler 메서드를 재배치 함으로써 Vue에게 원하는 바를 알려줄 수 있다.

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

이제 Vue는 변경 사항을 watch할 때 속성 내부의 내용을 추적해야 함을 알 것이다.