How to correctly bind v-model to a custom checkbox component?

Question

Vue.js

Hello! Based on the documentation, the v-model binding in the checkbox and radio component should look something like this:

Vue.component('app-checkbox', {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['name', 'value', 'checked'],
    template: `
        <label>
            <input 
                type="checkbox" 
                :name="name" 
                :value="value" 
                :checked="checked" 
                @change="$emit('change', $event.target.checked)">
            <slot></slot>
        </label>
    `
});

But in this case, v-model works with boolean values, and the array can no longer be passed (it will be converted to a boolean value). What am I doing wrong?
UPD: Example for better understanding

Answer 1

keep
UPD. Or, using your demo .