modelValue doesn't update value by Array.push if using assigning

[ItMaga]

Vue version

3.4.18

Link to minimal reproduction

https://play.vuejs.org/#eNqNVMtu2kAU/ZWRNzgSeETpoqIGkUYs2kUbtVU3OAvHvsAknofmQags/3vvjG1wSNJ25/s495z78NTRtVLJwUE0j1JTaKYsMWCdWmaCcSW1JTXRsCUN2WrJyQhTR6fQjeSq8yfUG77S6GMmMlFIYSzhZkcWHh9v7q7Qn9KWA6ujYYGrKreAFiFpKHaYcFlCtcgihGYRoRhL6SAxGkct+YTnKnkwUqDy2hfIuoDJojkJHu9DQd7Oor21yswpLUqBMORgB50IsFQoTleYRrUTlnGYlJKvZsn7ZPqBlszYoT8Bwyf3Wj4Z0Fgli8YDHorOA+iJBlGCBv2/vBewZ9wXsRf8nr7JRINjsQZnvmW7i6EUOFZWgf6mLMOdPBtOXlXy6UvwWe3g1Eyxh+LxFf+DObZN3WoIygYDsLnegW3D6x9f4YjfpyAu1VXdIt4IfgcjK+c1tmmfnChR9iAvqP0cdszE7qdZHy0I0zflhYZphPywEH9Rb7V+ljtLZoMp9lf8t//Bj9RZKC9+iv7olZbK4NmXsGUCbr0V1yTc9a+8cjAn11rnv0lz1SOAM3sCrNEw8WbkVIknPz/jRuEXahEH70BILyUOjWFH8VXXo0bVWrRiknMRrNDPCPuKQ50eEnTErxCPWz5P34KbsxIpbipWPKIWpF4s21IhPelFbqZ3ATnwJsqZffzOl2n+8S7sp8u67hpumpSiHfz3zlopyKrw9PhgdEKyaBnON6VtwosHpPkDw/Ov3g==

Steps to reproduce

Click on button check

What is expected?

Displays an array with the value [1,2]

What is actually happening?

Displays an array with the value [1]

System Info

No response

Any additional comments?

No response

[LinusBorg]

The reason is that the computed get only updates on the next tick, after the parent has received the value, and re-rendered.
So value.value.push(2) updates the old, empty array

I see how that can be counter-intuitive, but it's working as expected, from a technical perspective.

Solution: first, manipulate you array, then, assign the final result to the computed to trigger the emit.

https://play.vuejs.org/#eNqNVEtv2kAQ/isrXzASeEXpoaKASCMO7aGN2qoXnINjD+DE+9A+gMryf+/srg0OSdrePM/vm2/GW0c3UiYHC9EsmutcldIQDcbKZcpLJoUypCYKtqQhWyUYGWDq4By6FUy2/oQ6w3UafEx5ynPBtSFM78jC1ceb+yH65zRgYHc0DDBZZQbQImTumx3GTBRQLdIIS9OIUIzNaS8xGkUBfMwymTxqwZF57RqkbUCn0Yx4j/MhIWen0d4YqWeU5gXHMsQoDyrhYCiXjK4wjSrLTclgXAi2mibvk8kHWpTa9P0JaDZ+UOKoQWGXNBr1cCg6D6DGCngBCtT/4l6VPcO+ir3Ad/BNyhuUxWjUfFvurkTJUdayAvVNmhJ38kycrKrE8Yv3GWXhPEy+h/zpFf+jPoWh7hR4Zj0BTKZ2YEJ4/eMrnPD7HMSl2qpdxBvB76BFZR3HkPbJ8gJp9/I8289+xyXf/dTrkwGuu6EcUa+Gz/cLcRf11ugXutNk2lOxu+K//Q9OUmuguPopuqOXSkiNZ1/AtuRw56y4Jv6uf2WVhRm5USr7TZphVwGsNOeCNRo63gysLPDkZ5e6gf+FQsXBObCkoxL7wXCieNjOqJC14oFMcmmCHTqNcK7Y9+lKPI/4FeBRwHPwobi5MBH8tirzJ+SC0ItlaBVCHI6+HmObyb3zd55EWr2P36EAJLROuoG6DMT4x3uxnyzruhWiaeYUbe9/sMYITla5o4UPSUswjZb+rOc0JLx4WJo/1wS4ow==

[ItMaga]

The reason is that the computed get only updates on the next tick, after the parent has received the value, and re-rendered. So value.value.push(2) updates the old, empty array

I see how that can be counter-intuitive, but it's working as expected, from a technical perspective.

Solution: first, manipulate you array, then, assign the final result to the computed to trigger the emit.

https://play.vuejs.org/#eNqNVEtv2kAQ/isrXzASeEXpoaKASCMO7aGN2qoXnINjD+DE+9A+gMryf+/srg0OSdrePM/vm2/GW0c3UiYHC9EsmutcldIQDcbKZcpLJoUypCYKtqQhWyUYGWDq4By6FUy2/oQ6w3UafEx5ynPBtSFM78jC1ceb+yH65zRgYHc0DDBZZQbQImTumx3GTBRQLdIIS9OIUIzNaS8xGkUBfMwymTxqwZF57RqkbUCn0Yx4j/MhIWen0d4YqWeU5gXHMsQoDyrhYCiXjK4wjSrLTclgXAi2mibvk8kHWpTa9P0JaDZ+UOKoQWGXNBr1cCg6D6DGCngBCtT/4l6VPcO+ir3Ad/BNyhuUxWjUfFvurkTJUdayAvVNmhJ38kycrKrE8Yv3GWXhPEy+h/zpFf+jPoWh7hR4Zj0BTKZ2YEJ4/eMrnPD7HMSl2qpdxBvB76BFZR3HkPbJ8gJp9/I8289+xyXf/dTrkwGuu6EcUa+Gz/cLcRf11ugXutNk2lOxu+K//Q9OUmuguPopuqOXSkiNZ1/AtuRw56y4Jv6uf2WVhRm5USr7TZphVwGsNOeCNRo63gysLPDkZ5e6gf+FQsXBObCkoxL7wXCieNjOqJC14oFMcmmCHTqNcK7Y9+lKPI/4FeBRwHPwobi5MBH8tirzJ+SC0ItlaBVCHI6+HmObyb3zd55EWr2P36EAJLROuoG6DMT4x3uxnyzruhWiaeYUbe9/sMYITla5o4UPSUswjZb+rOc0JLx4WJo/1wS4ow==

Thank you for your quick response!

Did I understand correctly that this behaviour only works when using array methods along with assignment?

An example

value.value.push(1);
value.value.push(2);

and

value.value = [1];
value.value.push(2);

have different results

[LinusBorg]

They have different results because only in the second example so you add a new array. In the first example, you manipulate the original array.