Reactive data may trigger recursive updates when created in template render.

[rlsz]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9UktLJDEQ/iu1uWQGZnuQ3ZM7CvsQdvegooKXXGJ3dRtNJyGPdqDp/24lYVREvITU90jqq2RmP51rpoTsmO1C65WLEDAmdyqMGp31EWbw2G9okW1UE8ICvbcjcDJxYYRprQkRxjDASVau+F/U2sKt9br7wtfC9MmQ0xoYMN5giH9klEerNczCAFR3R1Cx1ztW87L+cWCtxkbbYcVTQFAGrEMvo/V8A1zLO9Q8o/mE6sm7phB0Iqcw9XTZR/Sk5EXkKaOvLqoXYXbbmp5yUxFxdFpGpApgd390Os8l4bLstlQVVBmXIkxfR9uhPhGMeMFgW8lOTdnzLnG2ZyZf9+YKtmExUNReDc1DsIbeosxGsNaOTmn0Fy4PMAh2XKeWOUlTfvpfsOgTbg54e4/t4wf4Q9hnTLBLjwH9hIK9cFF6arXSZ9fnuKf9C0kBkyb1J+QV0jOl3GOV/Uqmo7bf6Eq3/8qPUma4CWf7iCYcQuVGs3IpesHob/3+JPpru9+a78VHb8iWZ1n+7ug=

Steps to reproduce

Run, then catch error in console.

What is expected?

no recursive updates

What is actually happening?

recursive updates

System Info

Any additional comments?

bug conditions:

1. create reactive data when template render
2. access some prop with 'in' operator
3. set value of that prop after the access

[OnlyWick]

<script setup>
import { ref, reactive } from 'vue'

const msg = ref('Hello World!')
const data = reactive({});  // Move this line of code to the outside.
function getTestData1() {
  console.log('use in operator', 'label' in data);
  data.label = 'set data after in';
  return data;
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div>{{ getTestData1() }}</div>
</template>