[Vue3] props로 받은 데이터를 watch 내 사용 시 에러 해결

에러 문구
A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

에러 발생 코드

watch(
  props.data,
  (val) => {
    if (!val) return;
    // logic
  },
  { immediate: true, deep: true },
);

watch(
  props.items,
  (val) => {
    // logic
  },
  { immediate: true },
);

해결 코드

watch(
  () => props.data,
  (val) => {
    // logic
  },
  { immediate: true, deep: true },
);

watch(
  () => props.items,
  (val) => {
    // logic
  },
  { immediate: true },
);

props.data를 watch 문 안에 넣을 때는 () => props.data 라고 적어주어야지 에러가 나지 않는다!!