Vue js checkbox custom component - checkbox

Question

i'm having problems with checkbox in vue.js component.
My idea is to update parent model on child event(change).
<parent-component>
<checkbox-component name="This is name"
:id="'This is Id'"
:val="'test'"
v-model="details"
>
<checkbox-component name="This is name 2"
:id="'This is Id 2'"
:val="'test2'"
v-model="details"
>
</checkbox-component>
</parent-component>
Here is component code:
<template>
<div>
<input type="checkbox"
:name="name"
:id="id"
:value="val"
v-on:change="update($event)"
autocomplete="off"
/>
<div class="btn-group">
<label :for="id" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-ok"></span>
<span> </span>
</label>
<label :for="id"
class="btn btn-default active btn-sm">
{{ name }}
</label>
</div>
</div>
</template>
<script>
export default {
model: {
event: 'change'
},
props: {
id: {
required: true,
type: String
},
name: {
required: true,
type: String
},
val: {
required: true,
type: String
},
},
methods: {
update(event){
this.$emit('change',event.target.value);
}
},
}
</script>
I would like to store checkbox values in details array, and to update it same as in https://v2.vuejs.org/v2/guide/forms.html#Checkbox
What is happening now is that details[] is becoming string details with value of selected checkbox.
Is there some clean solution for this, or i need to write method to check if value is in array and slice/push it ?