How to select checkboxes by clicking on vue.js?

Question

Vue.js

Here is an example on pure js:
https://codepen.io/anon/pen/xjroxX?editors=0010
How can I do this in vue, or how can I implement something similar using vue?
I know about v-model, but checkboxes are created in a cycle, and it seems to me that generating a model for each is not an option.

Answer 1

How can I screw this thing into vue, or how can I implement something similar using vue?

There are different options - you would tell why you need this.
If completely on the forehead, then

methods: {
  onMouseOver(e) {
    if (e.buttons) {
      e.target.checked = !e.target.checked;
    }
  },
},

<input
  type="checkbox"
  v-for="i in 3000"
  @mouseover="onMouseOver"
>

for each, it seems to me that it is not an option to generate a model

Quite an option:

data: () => ({
  checkboxes: Array(3000).fill(false),
}),
methods: {
  onMouseOver(e, index) {
    if (e.buttons) {
      this.$set(this.checkboxes, index, !this.checkboxes[index]);
    }
  },
},

<input
  type="checkbox"
  v-for="(n, i) in checkboxes"
  v-model="checkboxes[i]"
  @mouseover="onMouseOver($event, i)"
>

True, it will work noticeably slower than without v-model(if there are a lot of checkboxes).