vue에서 object watch 하기

0. 문제

watch를 이용해서 object 안의 properties 중 하나만 변경돼도 감지를 하고 싶다

별 생각 없이 익숙한 arrow function을 이용해 작성

watch(() => object, () => //TODO)

But, watch는 감감 무소식

테스트해보자

Parent.vue의 Object CountWrap을 props로 받는 Child.vue
CountWrap의 count가 변경을 Child.vue에서 감지하고 싶다

코드

Parent.vue

<script setup>
  import {ref} from 'vue';
  import SampleComponent from '@/components/Child.vue';

  const countWrap = ref({ count: 0 });
  const addCount = () => countWrap.value.count++;
</script>

<template>
  <div>
    <h1>main</h1>
    <div>count : {{ countWrap.count }}</div>
    <button @click="addCount">Add</button>
  </div>

  <div>
    <h1>component</h1>
    <sample-component :count-wrap="countWrap"></sample-component>
  </div>
</template>

Child.vue

<script setup lang="ts">
  import {watch} from 'vue';

  const props = defineProps<{
    countWrap: {
      count: number
    }
  }>();

  //wrap 자체를 watch
  watch(() => props.countWrap, () => console.log('countWrap changed!(arrow)'));
  watch(props.countWrap, () => console.log('countWrap changed!(wrap)'));

  //wrap 안의 property를 watch
  watch(() => props.countWrap.count, () => console.log('countWrap.count changed!(arrow)'));
  //watch(props.countWrap.count, () => console.log('countWrap.count changed!(wrap)'));
		//ts error! watch의 첫 번째 param엔 object type만 올 수 있다.

  //watch(() => props.countWrap.count.value, () => console.log('countWrap.count.value changed!(arrow)'));
		//ts error! count의 타입은 ref가 아닌 number니까.
</script>

<template>
  <div>
    <p>{{ props.countWrap.count }}</p>
  </div>
</template>
</script>

<template>
  <div>
    <p>{{ props.countWrap.count }}</p>
  </div>
</template>

add 버튼 클릭시 결과(console창)

countWrap.count changed!(arrow)
countWrap changed!(wrap)

arrow function을 이용해 wrap 자체를 감시한 watch는 변경을 감지하지 못한다.

object 안의 property를 감지하려면

function 타입 대신 object 자체를 watch 하거나
property 자체를 watch 합시다.