Updating refs that are on <template> with @click on a checkbox input will not check the checkbox.

[dsaisho]

Vue version

3.2

Link to minimal reproduction

https://play.vuejs.org/#eNp9kktPAjEUhf9K040QcDBhR4D4CAtNfETdWRdjuWCh0zZ9jJjJ/HdvW2dwYdhM2nNOc78zbUOvjCnqAHRG545bYTxx4INZMiUqo60nDbGwIS3ZWF2RM4yeMcUU18p5IpQJ/l6vQZJFjA3e3oedx6X7FS9QO6qC72GNzsCBBO6FVsPFsmGKxBNFXcoAo1E80MbPfJKpkAc3HiojSw+4axqMt5ghZJ4w4ooQ/21gwSj/BL7/0AdGs3yZ5kYjz+/0+ryK9Ggcq/ReREGnzEImmPQIdEy9w1IbsS12Tiv8g6kFztCVERLso4ntHKMzkpzolVLqr7ukeRtg3OkJ+B9957DDDBdPFhzYGhjtPV/aLfhsr14e4IDr3sReQWL6hPkMTssQGXPsOqg1Yv/JJdrb9A6E2r661cGDcl2pCBqTbcozim/j5kT1I+60mKZzeMe0/QGktNbP

Steps to reproduce

click the checkbox. observe the {{cls}} value change and the checkbox not checking. If you remove {{cls}} from the template the box will check.

What is expected?

The view re renders with the updated string ref {{cls}} and the checkbox is checked.

What is actually happening?

click the checkbox. observe the cls value change and the checkbox not checking. If you remove {{cls}} from the template the box will check.

System Info

multiple systems / OS's

Any additional comments?

potentially related to this issue:
#8579

Explanation of cause from a member in the vue discord channel:

Clicking on the checkbox sets the checked state of the checkbox to true.
The click event happens.
Vue re-renders. The data bound to the v-model hasn't been updated yet, so when it re-renders the checkbox it sets it back to unchecked.
The change event happens, triggering the v-model. But that performs the update based on the current value of the checked property, which is now back to false.

[skirtles-code]

I originally posted this as a comment on #8579, but I'll move my comment here instead. The minimal reproduction below is effectively the same as the one on this issue, but I think the second example helps to illustrate how the problem can happen in a slightly more realistic scenario.

---

I just encountered a similar problem while investigating a question on Vue Land. I was going to open a new issue, but I think it's effectively the same underlying cause.

In this case it's a checkbox that can't be updated by clicking, because the click event triggers a re-render. Binding the v-model to an array is required to hit the problem:

Minimal reproduction

The v-model update is triggered by the change event, which fires after the checkbox has been set back to unchecked by the re-render.

As my previous example seems a bit too artificial, I've also put together a slightly longer example that shows a more realistic use case:

More realistic example