Vuetify: [Bug Report] Checkbox array of objects not working properly

[rawnanoob]

Environment

Vuetify Version: 2.2.17
Vue Version: 2.6.11
Browsers: Opera 67.0.3575.78
OS: Windows 10

Steps to reproduce

Click on one checkbox

Expected Behavior

The other list of checkboxes should not be affected by this.

Actual Behavior

As you click on one checkbox , the other list of checkbox are all checked

Reproduction Link

https://codepen.io/rawnanoob/full/oNXdxyM

[nekosaur]

This bug is caused by using an array of objects. By setting the value prop of v-checkbox to an inline object, the value watchers of both VInput component and validatable mixin gets triggered even when the object has not "changed", and lazyValue is set to value prop value.

This is an effect of v-checkbox inheriting from v-input while using value prop for a different purpose

[rawnanoob]

So is there way to solve this bug?

[KaelWD]

Use primitives instead of objects, or store the objects in data instead of the template.

[jakubstankowski]

I had the same problem, i recommend use simple html checkbox for that type of data, like this:
<form v-for="(filter, i) in filterValues" :key="i"> <input type="checkbox" @change="filterCheckboxChange(filter.value)" :value="filter.value" v-model="selected"> <label> {{filter.value}} </label> </form>

[DavidSmolinski]

This shows the data being destroyed. Using an HTML checkbox avoids the bug, but you loose some Vuetify.

How it should work

<input type="checkbox" :id="[bar.id, foo.id]" :value="[bar.id, foo.id]" v-model="foos_bars">
<label :for="[bar.id, foo.id]">{{bar.name}}</label>  

broken

<v-checkbox
  v-model="foos_bars"
  :label="bar.name"
  :value="[bar.id, foo.id]"
></v-checkbox>

stackoverflow