What is the difference between watch(() => props.something and watch(props.something)?

Question

I am using Vue composition API, using watch to watch the props injected from parent component

const props = defineProps(['boxId', 'test']);

when I used

watch(props.boxId, (newValue, oldValue) => {
  console.log(newValue + "and" + oldValue)
}, { deep: true })

the watch does not trigger, even if when I convert the props to a ref, but when I use

watch(() => props.boxId, (newBoxId, oldBoxId) => {
  console.log(`boxId changed from ${oldBoxId} to ${newBoxId}`);
});

it works as expected, I might be missing some fundamental knowledge but I really want to know the difference and why the first one does not work Thanks

The answer below is what I got from chatGPT and somehow it works, idk why the first one is marked with a warning saying invalid watch source