Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNqlVEuT2jAM/iuaXGBnIJnSGwXaTvdx2Q6dLkdfQqKAaWJ7bCd7YPLfKzuPze4Gpo8LWJL1Wd8nKefgq1JhVWKwDFYm0VxZMGhLtWGCF0pqC2fQmM1Aiu+yFBZTqCHTsoAJZU36W99koVp/GDnDgVKYiUQKY6EwB1g7pOlN57JIP43vzASA1ByFjS2XYgmTPBapSWLlQGrKYaKvYDq9gfUGfBLhhlWcl0hI3uFQl83xGiRATbgN9CpqmBNnMiwWKo8tkgWwOn7Y/MQ4sbxCkPsTJrZhqbRUwI0pcRXRHX83cRpUc56tWUB1sQCWpUoJap7xHOd0il8irs4Fme6f7IggVlH/djALGmHnRazCk5GCGuRJsTZgWNDTZAGJ7WwWHK1VZhlFJktcB04mlPoQ0SnUpB0vMERTzPdaPhvUBMyC2QAjImeFeq5RpKhRX8N8c/UdbqcxUenm4fqQtSoPx+uTZyygGRinuaE+p5hxgT+c5SaHEZJT+Z5EviWNl7D1jWqIeZ0HrvqmA/WoMscwl4epx6ZZcJHmtUzqwsH5EW1qa+Y0DEN/O3z97DvoF4jFZQxf3kiqlYdDjltNmYNphx7SJ1If+vmmi1di6/Vw/OEzTJzsOuZ2AmObMVaKYzFay+JCHW/8f1vDtbVMeeUPbkM/tieAW0TVbmkbjProIAXgvlthQzt0hteNhNoL4LIHzwzTH2US531HPUQ/LaPJ+9JakuBLkvPkl1v6VlIW9Ji7u6cd7LYPD493HUCTNcLz6RjnuXz+F6p+3v6L4YXsSxQXf8yxgxt+BuvfBSAx5g==

Steps to reproduce

1. Create ref with object deep at least 2 levels
2. pass it through props to child component
3. create local, reactive variable in child component using object descructuring
4. make some changes to local object

What is expected?

Changing local variable should not change prop (parent component's) variable

What is actually happening?

Changing local variable also introduces change of original variable from parent component

System Info

No response

Any additional comments?

No response

This appears to be working correctly to me.

msg.value and props.updateFileData are the same object. This is creating a shallow copy of that object:

const formData = reactive({
  ...props.updateFileData
});

So formData is a different object. But the nested object in msg.value.test and props.updateFileData.test is the same object as formData.test. Try adding {{ updateFileData.test === formData.test }} to your template, it should confirm that they are the same object.

If you have further questions about this I suggest asking on the Vue Discord at https://chat.vuejs.org/.