Checkbox form array data Vue 2
<p>I have a checkbox list which is generated using a for loop that consists of an id and a name:</p>

<pre><code>Data:
yards[{id:1,name:'test'}] etc

HTML:
&lt;ul class="checkbox-list"&gt;
     &lt;template v-for="(yard, index) in yards"&gt;
                                &lt;li&gt;
                                    &lt;input type="checkbox" 
                                        v-bind:id="'yardlist_'+yard.name"
                                        v-bind:value="yard.id"
                                        v-model="newSchedule.yards.id"&gt;
                                    &lt;label v-bind:for="'yardlist_'+yard.name"&gt;{{ yard.name }}&lt;/label&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;input type="text" 
                                        class="form-control"
                                        placeholder="Yard notes..."
                                        v-model="newSchedule.yards.notes"&gt;
                                &lt;/li&gt;
                            &lt;/template&gt;
                        &lt;/ul&gt;
</code></pre>

<p>I want to save the selected checkbox with the id and notes field in an array:</p>

<pre><code>newSchedule: {
            due_at: '',
            notes: '',
            users: [],
            yards: [{id:'',notes:'']
        }
</code></pre>

<p>I have tried using the index from the yards array: newSchedule.yards[index].notes but am getting the following error <strong>"TypeError: undefined is not an object (evaluating 'newSchedule.yards[index].id')"</strong></p>

<p>Any ideas how I can achieve this?</p>

<p>** Update **
Here is a basic fiddle of what I am wanting to achieve:
<a href="https://jsfiddle.net/j7mxe5p2/13/" rel="nofollow">https://jsfiddle.net/j7mxe5p2/13/</a></p>