title: Binding Vue checkbox group to nested object using v-for
body: <p>I have a nested data set in Vue that I would like to bind to several checkbox groups. The code is as follows (<a href="https://jsfiddle.net/0k9u4oLa/21/" rel="nofollow noreferrer">jsfiddle here</a>):</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;b-form-checkbox-group 
      v-model="checked"
      v-for="(opts, key) in optGroups"
      :key="key"
      v-model="checked[key]"
    &gt;
      &lt;button @click="checkAll(key)"&gt;Check All&lt;/button&gt;
      &lt;b-form-checkbox 
        v-for="opt in opts"
        :key="opt.value"
        :value="opt.value"
      &gt;{{ opt.text }}&lt;/b-form-checkbox&gt;
    &lt;/b-form-checkbox-group&gt;
  &lt;/div&gt;
  
  new Vue({
    el: '#app',
    data: {
      optGroups: {
          g1: [
          { value: 'val1', text: 'value 1' },
          { value: 'val2', text: 'value 2' },
          { value: 'val3', text: 'value 3' }
        ],
        g2: [
          { value: 'val4', text: 'value 4' },
          { value: 'val5', text: 'value 5' },
          { value: 'val6', text: 'value 6' }
        ]
      },
      checked: {
          g1: ['val1'],
        g2: []
      }
    },
    methods: {
      checkAll(groupKey) {
          this.checked[groupKey] = this.optGroups[groupKey].map(
          opt =&gt; opt.value
        );
      }
    }
  })
  </code></pre>
  
  <p>I would like the checkboxes to respect the values set in the <code>checked</code> object. on startup. I would like easch <code>Check All</code> button to check all boxes in its group.</p>