When a composite prop is passed in, the watcher will be triggered incorrectly

[hzfi]

Vue version

^3.5.17

Link to minimal reproduction

https://play.vuejs.org/#eNp9VFGP0zAM/ismL+3EaIXgaXQD7nQSIAGnA4mXvpTW63qXJlWSbkNV/zuOs+66E1yfEvuz/fmL3UF87Lpk36NYicyWpukcWHR9t8lV03baOBjA4BZG2BrdQkTQ6Oy61m13siepv/hM0btZqFZfda8cVhcJ5gi7K6TUh7snNQiSq1Ir66C1Naw9iTj6hISFX9rI6kW08JA0hYDSxDyghpE8c+NjieDjqDOzOF7AegMDW31Esi9kjxQ3jGzzIVkaxCFZ6OKw7WThkG4A2e715tagtfC7d04r0AYa1fUkpG4RHB5dkqUEYvAJ86GUTfmwzkUo7lt8uYZoedFgLjbDwL5xzNIQecpiIA2nUGn/qtUVSspH6Fywk938QitqqtGKvNQk0OeJXRUWv3duBVG0DFaFh2uttk298ip423hKlaWzjsVSOEvyEjC5t1rR5HDaXJRUrJFoKC2Vs7lYeVV96lzwC3xhmzM9nkpSzA7Lh3/Y7+3R23LhpUWzx1ycfa4wNbrgvvnxjQSeOUmIXhL6GecdWi17zzHArnpVEe0Zjtl+5hFtVP3T3hwdKjs15YmyPIzPBc2r1/l/rT/SfZO8DbKqkVScFubp6oEsVE2P5SjNfA0PhSt305Jw1VzwmkzT3hndWZrbCreNwlt/y5hFeP8VFOoPBYybeMFxnDD2gDCFHJ8EMLcW0yYsQctq2hDfkK+lJSZS13HEKd5PX7SEcwRV8OiCRHFx5ExT12joP+B2GDpB4zeY1Qh0ntuxqtnzwZdvOzalwXY5m+Nfo/CZOQ==

Steps to reproduce

A component passes in an object, part of which is a reactive value (defined by shallowRef or ref ), watch the props in the component, and every time the page element is updated, the watcher in the component is triggered

const opt = ref({})

  <Comp :option="{
    someBaseOpt: '',
    newConfig: opt
  }" />

watch(
  () => props.option,
  (val, old) => {
    console.log('watch?????????', val, old);
    alert('triggered the watcher')
  }
);

I think this may be a bug

What is expected?

Only triggered when props actually change

What is actually happening?

Unrelated page element changes will trigger

System Info

Any additional comments?

No response

[hzfi]

Correction: It is not the page elements that change, but other unrelated ref variables that change

[jacekkarczmarczyk]

updating the input forces rerender, and that will create a new object that you pass to <Comp :option>, since it's a different object the watcher is triggered

[edison1105]

jacekkarczmarczyk's explanation is correct. If you don't want the watch to trigger, you can do it like this.