Как на Vue сделать чекбоксы выводимые v-for независимыми?

Question

[rokerok_n]

Столкнулся с проблемой:
вывожу на экран объект содержащий список заданий для каждого проекта, в списке возле каждого задания чекбокс для изменения статуса, так вот при переходе от списка одного объекта к списку другого чекбоксы остаются те-же самые, тоесть если у предыдущего объекта они были нажаты, то и у нового будут, хотя их не нажимали и наоборот. Соответственно косяк со статусом. Использование :key c уникальным айди не помогло. Использование цикла нужно, так как в оригинале пользователь сам создает проекты и задачи.
Пример: https://jsfiddle.net/rokerok_22/zqecsa4a/
Подскажите как решить?

Answer 1

[Evgeny Kulakov]

Как-то так: https://jsfiddle.net/xwh95n2m/

Answer 2

[0xD34F]

Вместо индекса - ссылка на выбранный объект:

data: () => ({
  activeProject: null,
  ...
}),

Вместо того, чтобы вручную прописывать разметку кнопок - v-for по массиву group:

<button
  v-for="project in group"
  v-text="project.name"
  @click="activeProject = project"
></button>

Вместо обработки события change - v-model:

<input type="checkbox" v-model="task.done">

https://jsfiddle.net/arLfczjv/