title: Multiple Dynamic Checkboxes with input groups in vue js
body: <p>I am trying to make a form which contains an input group section, in this group, there are one select box and multiple checkboxes. Checkboxes are populated based on the select box selection. There is also an add and remove button to generate and remove input group. The select box is used with v-model to filtered the checkboxes. But when I generate a new input group and make changes, all checkboxes are changed.
  I want them to be isolated. How can I achieve?</p>
  
  <hr>
  
  <p>Here is my Template.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;form @submit.prevent="onSubmit"&gt;
          &lt;div v-for="(variationProduct, index) in variationProducts" :key="variationProduct.id"&gt;
              &lt;div class="from-group mb-4"&gt;
                  &lt;label class="col-form-label"&gt;&lt;b&gt;Categories :&lt;/b&gt;&lt;/label&gt;
                  &lt;select class="form-control mr-2" ref="categories" v-model="category"&gt;
                      &lt;option value="0"&gt;Please select category...&lt;/option&gt;
                      &lt;option v-for="category in categories" :key="category.id" :value="category.id"&gt;
                          {{ category.name }}
                      &lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div v-if="hasError"&gt;
                      &lt;validation-errors v-if="errors['categories.'+index]" :errors="errors"&gt;
                          {{ errors['categories.'+index][0] }}
                      &lt;/validation-errors&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group mb-4"&gt;
                  &lt;label class="col-form-lablel"&gt;&lt;b&gt;Variation Products :&lt;/b&gt;&lt;/label&gt;
                  &lt;div class="row"&gt;
                      &lt;div v-for="filteredVariationProduct in filteredVariationProducts" :key="filteredVariationProduct.id"&gt;
                          &lt;div class="col-12"&gt;
                              &lt;input :id="filteredVariationProduct.id" :value="filteredVariationProduct.id" type="checkbox" ref="variationProducts"&gt;
                              &lt;label :for="filteredVariationProduct.id"&gt;{{ filteredVariationProduct.name }}&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div v-if="hasError"&gt;
                      &lt;validation-errors v-if="errors['variationProducts.'+index]" :errors="errors"&gt;
                          {{ errors['variationProducts.'+index][0] }}
                      &lt;/validation-errors&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="float-right"&gt;
                  &lt;button @click.prevent="add" class="btn btn-success"&gt;Add&lt;/button&gt;
                  &lt;button @click.prevent="remove(index)" class="btn btn-danger"&gt;Remove&lt;/button&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;hr&gt;
          &lt;/div&gt;
          &lt;input type="submit" class="btn btn-primary" value="Submit"&gt;
      &lt;/form&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Here is my JS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  import ValidationErrors from './ValidationErrors.vue';
  
  export default {
      components: { 
          'validation-errors': ValidationErrors,
      },
      data () {
          return {
              variationProducts: [],
              categories: [
                  { id: 1, name: 'Technology'},
                  { id: 2, name: 'Business'},
                  { id: 3, name: 'Marketing'},
                  { id: 4, name: 'Development'},
                  { id: 5, name: 'Engineering'},
              ],
              category: 0,
              activeVariationProducts: [],
              count: 1, 
              errors: {},
              hasError: false,
          }
      },
      methods: {
          add: function() {
             this.count++;
             this.errors = {};
             this.hasError = false;
             this.variationProducts.push({ id: this.count });
          },
          remove: function (index) {
              if ( this.variationProducts.length &gt; 0 &amp;&amp; index &gt; -1) {
                  this.variationProducts.splice(index, 1);
              } else {
                  alert('Must have at least one input!')
              }
          },
          onSubmit: function() {
              console.log(this.$refs.variationProducts.value);
          },
          generateVariationProducts: function(num) {
              for(let i = 1; i &lt;= num; i++) {
                  let activeVariationProduct = {
                      id: i,
                      name: 'Product '+ i,
                      category_id: i
                  };
                  this.activeVariationProducts.push(activeVariationProduct);
              }
          },
      },
      computed : {
          filteredVariationProducts: function () {
              let categoryId = parseInt(this.category);
              if (categoryId !== 0) {
                  let filteredVariationProducts = this.activeVariationProducts.filter((variationProduct) =&gt; {
                      return variationProduct.category_id === categoryId;
                  });
                  return filteredVariationProducts;
              } else {
                  let filteredVariationProducts = this.activeVariationProducts;
                  return filteredVariationProducts;
              }
          }
      },
      created () {
          this.variationProducts.push({ id: this.count });
          this.generateVariationProducts(10);
      },
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>