How to style checkboxes created in loop v-for not violating their work?

When styling checkboxes created by the Directive v-for the problem: is only activated the first checkbox on whichever element of the array is not pressed. Original checkboxes work fine. Key added to the label and to input, but still works only the first checkbox. What could be the problem?
Example https://jsfiddle.net/rokerok_22/8bowaa8s/
June 5th 19 at 21:44
2 answers
June 5th 19 at 21:46
Solution
It must be so?

First- v-for must-have item li, not the ul. Secondly, in order to dynamically assign values to attributes (you have it id and for), we need to use v-bind, and not just to write a string matching the name of the index from the v-for.
Thank you for the clarification! You make your answers) Now everything is clear. - billie_Schroeder82 commented on June 5th 19 at 21:49
June 5th 19 at 21:48
You have a repeated id, just wrap the input by label, without using for.

Find more questions by tags Vue.js