Vue.jsのコンポーネントで親から配列をバインドさせたい

現状

下記のような複数のチェックボックスを生成しcheckedにバインドしています。

HTML
1<div id="app">
2    <div v-for="item in getList" :key="item.id">
3        <div style="color: blue;">
4            <input v-model="checked" type="checkbox" :value="item">{{ item.name }}
5        </div>
6        <hr>
7    </div>
8    <pre>
9        {{ checked }}
10    </pre>
11</div>

JavaScript
1new Vue({
2    el: '#app',
3    computed: {
4        getList() {
5            return [
6                { id: 1, name: 'その１' },
7                { id: 2, name: 'その2' },
8                { id: 3, name: 'その3' },
9            ];
10        }
11    },
12    data: {
13        checked: [],
14    }
15});

実現したいこと

このチェックボックスをコンポーネントにして、

JavaScript
1Vue.component('v-checkbox', {
2    props: ['item'],
3    template: `
4        <div style="color: red;">
5            <input type="checkbox" :value="item">{{ item.name }}
6        </div>
7    `,
8});

このようにコンポーネントに v-model で同じような挙動にしたいのですが、方法が分かりません。

HTML
1<div id="app">
2    <div v-for="item in getList" :key="item.id">
3        <v-checkbox v-model="checked" :item="item"></v-checkbox>
4        <hr>
5    </div>
6    <pre>
7        {{ checked }}
8    </pre>
9</div>