Reactivity in object is lost

[alanscordoba]

Vue version

3.5.7

Link to minimal reproduction

https://play.vuejs.org/#eNqVVMtu2zAQ/BWCF9uoIBdoTq4dNC18aIAmRVL0EuVAS2uZCU0KfCQODP17l5RES4YSoDrY0j6Gs7O7PNKrqkpfHNAFXVrYV4JZuMwkwWe5cdYqSb7lgufPq4yyosho6/TPFX43kfMm9L1EKLgdZK69YTR1d9ELOx41lNxYrdICLBMCcrWvtNowacHUdQcRk95N5/vKgbFqmIT/mVzOe3Xjp8k1rywhgslyNbFmQgxYV6ETQZS25Eg0sNzyF0iIkr+UQzIFqclWqz2ZoJaTXqgz8OPEOUal86Fj8tWfTXIljUX4hjVZxZOmx4Y2Lxbkc9K8byHfsQWRTojWMiLSgjw8EmYIk28Pj21YFOPcWc88CwEnCn9Zzoc86lmgGgufTmdkdUlafud51/e3N2nFtIFpeEUflyXfvk27yBme2ZzbFI9DhnkB9AxzbAbSypldJ04n0IcJAmRpd60S/pFqv9GwIBltwzNKPv0HhiePQxW754e9q6CT5XbzBLlNmTG8lLH0ZKAWwiBYEHc4GzF+jEtyYhrbGtRczptBDkNNE2oN0tvyMn0ySuK2B2YZ9VhcgL6tLEf6GV10nHHfhVCv18FmtYO2XszZQf48Yn8yB2/L6G8NBvQLKhl9lukS8BLw7vX9DRzwPTr3qnBe9w+cd2CUcJ5jE/bdyQJp9+IC259h73DE/pj1wYI0XVGeaBA4xGcU19RL/F7pJ7pf0ouQh01GFYedSa1BJeOuvzKb7xJy1+7K4ErAvsIhxG2dRDdej2ddZsg7d0KZnnERwZZhRy+T/vIG0ww5e4Lh8FGQZDiLEaAdY5zVz23Z4XcMIt0qvWaIz/Gu7GH10cImZl6NYAhb5MPTZsHCeDfb0vQBBSsAqqY1aEeFPIWa1v8AEB85sg==

Steps to reproduce

First press the add button, then the edit button and finally add again

What is expected?

I hope that after pressing the edit button, the registration reactivity is not lost and the composable works

What is actually happening?

After pressing edit, reactivity is lost and the composable no longer works, so data is not added to registros.impuestos

System Info

No response

Any additional comments?

How can I maintain reactivity, after replacing the object properties?

[LinusBorg]

Not a bug, turned this issue into a discussion so community can help you with an answert.

[alanscordoba]

Ok perfect, any help please?

[r2abreu]

Hola Alan, the main problem with the composable is the way the reactive Proxy (registro) is used when trying to pass it down to the composable.

useComprobante(registro.detallecomprobantes, registro.impuestos)

Not destructure-friendly: when we destructure a reactive object's primitive type property into local variables, or when we pass that property into a function, we will lose the reactivity connection:
-- Limitations of reactive

Remember that In Vue 3, the reactive method creates a Proxy, making the entire object reactive based on property access. The reactivity is in the Proxy, not the individual properties.

Here's a working example. Hope that's clear.

PS: There's still a reactivity issue when reseting (edit-ing) the registro state. The example does not fix that.

[alanscordoba]

Thank you very much for your comment, now I am trying to solve it with the use of ref, but again the same thing happens: example. What could you recommend to solve it?

[r2abreu]

I believe this is linked to the following statement from the docs:

If a new ref is assigned to a property linked to an existing ref, it will replace the old ref:
-- https://vuejs.org/guide/essentials/reactivity-fundamentals.html#additional-ref-unwrapping-details

In your code, Object.assign is assigning the value of registroVacio.detallecomprobantes to the registro.detallecomprobantes property. The problem arises because the watcher is observing the original detallecomprobantes property, which is no longer reactive after being replaced by the new detallecomprobantes.

To "resolve" this, you can move the composable registration inside the edit function, after the Object.assign call (not that I recommend it). Try revisiting the Vue 3 documentation on reactivity to ensure you are using reactivity only when necessary. For instance, reciboVacio might not need to be reactive.

I hope this makes sense.

[alanscordoba]

I share what was the solution I found: example. For now in my case that works fine.