checkboxes wrapped inside Draggable automatically checked itself when useI18n() change locale

[ga676005]

This issue only occurs when I click the checkboxes rendered by vue draggable. I have run into some other bugs but this one is the weirdest. Please let me know if I could provide more information.

In the center of the video, there are two sets of checkboxes, the one on top is rendered by vue draggable. The other one is rendered by normal v-for. They are mapping to same values, corresponding one of the other.

0:00 click two checkboxes rendered by vue draggable 0:07 log all inputs that is checked. the corresponding inputs are logged correctly 0:12 check all and uncheck all by adding and removing ids in a array that the v-model of checkboxex depends on 0:21 usei18n() change locale, one of the checkboxes rendered by vue draggable somehow checked itself 0:24 log all inputs that is checked. the input that is checked in the screen is logged, while its state showed next to it is still checked: false 0:28 click checkboxes rendered by normal v-for, corresponding checkboxes are checked 0:36 lost a few frames but the checkboxes are now all unchecked 0:37 usei18n() change locale, nothing weird happened 0:42 The rest is repeating the steps that click checkboxes rendered by vue draggable, check all and uncheck all, then usei18n() to change locale which somehow trigger some input elements that had been clicked before to check themselves.

My solution to this is updating key on checkboxes components to force a re-render when these kind of bugs occur.

https://user-images.githubusercontent.com/51456572/160740803-78ef78b6-3b9c-4a32-bdf2-c1f9da5bdd4b.mp4

dependencies: "vue": "^3.2.31", "vue-i18n": "^9.1.9", "vuedraggable": "^4.1.0",

Browser: Edge 99.0.1150.55 Chrome 100.0.4896.60