title: Custom Tag Input VueJS and Checkbox
body: <p>I'm working on a feature using Laravel and VueJS, <a href="https://i.stack.imgur.com/qK28g.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qK28g.jpg" alt="enter image description here"></a></p>
  
  <p>In photo you can see in right hand side there have two checkbox group: 1. Size and 2. Color. And left sizde Input Tag Text Area or Text Box. If I click on checkbox Size: S it will show in tag input box like: size:S X , and if I select Color:Red , it will also show in Tag input box like: Color:Red x,At the same time two different josn object will fill with those selected checkbox. 
  Like: size_object: { name:s, id: 2 }
  And Color: { name:Red, id: 10 }</p>
  
  <p>Can any one please tell me how can I solve this using Vuejs. </p>
  
  <p>Code from comment:</p>
  
  <pre><code>&lt;div v-for="size in size_lists"&gt; 
    &lt;input type="checkbox" 
           v-model="size_tag_lists" 
          :id="size.id" 
          :value="size.id" 
          class="attributes-checkbox" /&gt;
  
    {{size.name}} 
  &lt;/div&gt; 
  
  &lt;script&gt; 
    data(){ return{ size_tag_lists: [] } } 
  &lt;/script&gt;
  </code></pre>