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

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==

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

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.