title: Is it possible to group v-model with a nested array in Vue.js?
body: <p>I'm trying to do filtering on groups in a vue app. Is it possible to group v-model with a nested array?</p>
  
  <p>I've tried with the below template...</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;div class="filter__control filter__control--tags"&gt;
      &lt;div class="filter__label"&gt;Colour&lt;/div&gt;
      &lt;div class="filter__list"&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[0]" value="Harvest"&gt;Harvest&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[0]" value="Moss"&gt;Moss&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[0]" value="Navy"&gt;Navy&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[0]" value="White"&gt;White&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="filter__control filter__control--tags"&gt;
      &lt;div class="filter__label"&gt;Size&lt;/div&gt;
      &lt;div class="filter__list"&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[1]" value="L"&gt;L&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[1]" value="M"&gt;M&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[1]" value="S"&gt;S&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[1]" value="XL"&gt;XL&lt;/label&gt;
        &lt;label&gt;&lt;input type="checkbox" v-model="selectedTags[1]" value="XS"&gt;XS&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And vue instance..</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
    data: {
      selectedTags: []
    },
    watch: {
      selectedTags: function() {
        // I expect the array to look something like...
        this.selectedTags = [
          ["Navy"],
          ["XS", "S"]
        ]
      }
    }
  });
  </code></pre>