v-memo skips updates when used with v-for and within a v-if #12708
Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
- click the button "change show"
- click the button "change show"
- click the button "count++"
- click the button "count++"
What is expected?
- the number is no longer displayed
- the number is displayed again
- the shown number is updated to 1
- the shown number is updated to 2
What is actually happening?
- the number is no longer displayed
- the number is displayed again
- the shown number remains 0
- the shown number is updated to 2
System Info
System:
OS: Windows 10 10.0.19045
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
Memory: 12.20 GB / 31.69 GB
Binaries:
Node: 22.4.1
npm: 9.3.1
pnpm: 8.9.0
Browsers:
Chrome: 131.0.6778.265
Any additional comments?
It seems the if the memo values are the same when the v-if is hidden and shown again, then an update to the memo values is skipped and only the second change is rendered.
A plausible workaround is to use v-show instead or alternatively make sure the memo values are changed when the v-if is shown again. https://play.vuejs.org/#eNp9Uk1P4zAQ/SuzvrCoJd2qu5eSov0Qh+UACLhhhEI6aU0T2/JHKIry3xnbTakQ4jbz3puZN2N37I/WWeuRzVluSyO0A4vO6zMuRaOVcdCBwQp6qIxq4IikR6dcclkqaUm7Vi+wCIrvzng8HvBSeel2xI9jKkiw18vCoTmsIC6fpMk0kxKHja5JRRlAbnUhoT0R1YKzMIyziL8zlTJEYY0NCAn30wfOYL7B1x1IWXvSYKMov4+uxoMLUp51XcT6njxQvzQzhRDjJ++ckvC7rEW5oR7DBqMFTE9323/bGSvXhVxhvEk+SYWp4ccmceZoFEpSdCDPJ/sDsDFzlg5XiVX2bJWkN+pCv9Cg0aJGc6WdoMNyNofIBK6oa/VyEbFw4PGAl2ssN5/gz3YbMM6uDVo0LXK251xhVugSfX57iVuK92Sjlr4m9RfkDVpV++Axyf56uSTbB7ro9n/8aUKu7uz51qG0w1LBaFD2Uc8Z/b5/X6z+bneW/Yx1XPZ0xccWTehJB5xlv7LpjPVvedn9Nw==