[vuejs] 중첩된 데이터(배열, 객체) watch 작동

watch 속성은 데이터의 변경이 일어날 때, 즉각적으로 그것을 감지하는 역할을 한다.

[1, 2, 3, 4]
[1, 2, 3, 4, 5]

위와 같이 배열 요소가 추가되었을 때, 분명 우리는 해당 array의 값이 변경되었다고 인식하지만

watch는 그렇지 않다.

 

이렇듯 배열이나 객체같이 중첩된 요소의 변경 감지를 위해서는 deep 속성을 추가하여 사용해야한다.

 

watch(
 () => state.array,
 () => {
   console.log('변경 감지');
 },
 {
   deep: true,
 }
)