[Bug Report][3.7.4] [Bug Report][3.7.3] VCheckbox skips next update:modelValue when modelValue is not updated

[tobias-rondin]

Environment

Vuetify Version: 3.7.4
Vue Version: 3.5.12
Browsers: Chrome 130.0.0.0
OS: Windows 10

Steps to reproduce

Click the checkbox twice

Expected Behavior

The checkbox should change value every other click

Actual Behavior

The checkbox changes value every third click

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Same issue as #20673, but since there was a misunderstanding of what the issue was, I have recreated it with clearer instructions.

[MatthewAry]

I believe the source of this behavior is caused by the vuetify's proxiedModel composable. Specifically here.. This composable it a core part of how vuetify handles values for input fields as it provides vuetify with additional lifecycle hooks to manage the model value depending on the functional requirements of the input field. I'm not really sure if this should be classified as a bug. The benefit from having this guard is to prevent infinite update cycles in certain scenarios. It also yields some potential performance gains by possibly eliminating unnecessary re-renders when the actual value does not change.

However proxiedModel is an impure function and also violates the principle of least surprise.

I was able to make the behavior work by using the component that lies underneath the VCheckbox component, VSelectionControl. but my implementation is without the benefits of being wrapped in the VInput component, thus wouldn't work with the VForm validators. I will raise this with the team to see how they would want to classify this.

On one hand, an argument could be made that this is not really a bug because what you're doing is forcing a checkbox component which is fundamentally designed to only have 2 possible value states that can be activated on it, to act as if it has 3 states, by requiring a double click to change the state.

But on the other, the behavior the proxiedModel composable exhibits can produce unexpected results like the one you bring up, however any changes we make to this composable could have undesired side effects on dependant components.

[MatthewAry]

@johnleider offered this workaround https://play.vuetifyjs.com/#eNp1Uk1vgzAM/SsWF0Dqxh0B2rTTLjvs6zJ2oGBW1EAiCN0qxn+fE0gDbXeBxH7P9nvxx+B0bR7cC3F76NEJnajL20pI6FD2AljWfMWpI7vUSdIGoKoFbyUM0GK5AXkUCM/qlPNa9BILGKFseQ0uFXPTRlE06E0UmcTHpuQQg/uy4z0rppgLvybwxOUcm5g5bzoJ+Q7zPVWOVU+vzFiHvs32p8KhmiSyjZKZcVGc2Mv6JPRBtdjyn/eM9Ug076AOIWw5Z5g1PsQJDIpBBpTg2Z63GghxfC7KN3jqMs1voKD/JnlZ6poZCjkCknJb9n/mmqZ+9Fn4yap8//pd5WhkE9W8n+dpsd7cZp49XIvYTMml9efT6K4+OR0F0z7R9tBFYi0YAfUuRYebTAh91BcaT2ZVg+0cmoLzjCYEEO7xSCtpO6aOTbJsi4yyRtoyF9a8QKbfmBCzoiXgbqq5xp2vhyUkUWDnO808DNccHvU7kCJFWelUkcmGKFjY44ybpmdMfz7/AA8VNck=

[KaelWD]

Duplicate of #15666, it's a vue limitation: vuejs/rfcs#188