O problema é o seguinte:
Tenho várias listas com um título, onde ele serve como um "selecionar todos" mas ele deve selecionar apenas os checkboxes que são seus "irmãos".
Porém não consigo checá-los no "selecionar todos" de cada lista e atualizar a quantidade final ao mesmo tempo.
Fiz um exemplo mostrando uma lista sendo utilizada:
var app = new Vue({
el: '#app',
data: {
checks: [],
lista: [{
"proprietario": "Jon Snow",
"id": "0",
"lojas": [{
"id": "0",
"nome": "Loja 1"
},
{
"id": "1",
"nome": "Loja 2"
},
],
},
{
"proprietario": "Jon Snow 2",
"id": "1",
"lojas": [{
"id": "3",
"nome": "Loja 12323"
},
{
"id": "4",
"nome": "Loja 2123123"
},
],
},
],
},
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
<p>Quantidade Final: {{checks.length}}</p>
<div class="wrapper" v-for="(list,i) in lista">
<div class="w-select-all">
<input type="checkbox" value="" :id="'selectAll'+list.id">
<label for="selectAll0">Selecionar Todos</label>
</div>
<div class="w-check" v-for="(loja,i) in list.lojas">
<input type="checkbox" :value="loja.id" :id="'chk'+loja.id" v-model="checks">
<label :for="'chk'+loja.id">{{loja.nome}}</label>
</div>
</div>
{{checks}}
</div>