vue 중첩데이터 감시, vue watch nested data is not working

watch 요소는 특정 data가 변경이 일어났을때 동작하는 기능이다.

해당 기능을 통해 특정 data의 변화를 감지하고 그에 따른 처리가 가능하다.

비슷한 기능으로는 computed 요소가 있는데 공식문서에서는 명령형 프로그래밍인 watch 보다는 선연형인 computed를 선호한다고 되어있다.

나도 그런 이유로 주로 computed를 사용했으나 이번엔 특별히 computed 내부에서 추가적으로 처리해야할 로직이 없었고 단순히 options 내부 값들을 저장해주는 로직뿐이여서 watch 기능을 사용하게 되었다.

본론으로 들어가서, watch 기능을 사용하는데 nested object는 제대로 watch 요소가 제대로 작동하지 않는다.

  watch: {
    options: function(val) {
      localStorage.setItem("listing_options", JSON.stringify(val));
    }
  },

내경우는 listing options이라는 유저 필터에 활용되는 값이 있었다. 해당 값을 브라우저 종료 후에도 반영구적으로 기억하기 위해 localstorage를 활용하였는데, 위 처럼 된 코드는 정상적으로 watch 요소가 작동하지 않는다.

  watch: {
    options: {
      handler: function(val) {
        localStorage.setItem("listing_options", JSON.stringify(val));
      },
      deep: true
    }
  }

이유는 nested object의 모든 값들을 추적하기에는 오버헤드가 너무 크기 때문에 deep이라는 요소가 true로 설정되었을때만 nested object를 끝까지 감시하도록 되어있다.

따라서 아래와같이 수정해주면 정상적으로 작동한다.

출처 : https://vuejs.org/v2/api/#watch