title: vuejs v-model, multiple checkbox and computed property
body: <p>I am trying to use multiple checkboxes in single file component. And I need to computed property, but I have boolean newVal instead of array in my setter. Here is my code:</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>var demo = new Vue({
      el: '#demo',
      data: {
          _checkedNames: [] 
      },
      computed: {
        checkedNames: {
          get: function () {
            return this._checkedNames;
          },
          set: function (newVal) {
            console.log(newVal); //with computed we have true/false value instead of array
            this._checkedNames = newVal;
          }
        }
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.1.10/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="demo"&gt;
    &lt;input type="checkbox" id="jack" value="Jack" v-model="checkedNames"&gt;
    &lt;label for="jack"&gt;Jack&lt;/label&gt;
    &lt;input type="checkbox" id="john" value="John" v-model="checkedNames"&gt;
    &lt;label for="john"&gt;John&lt;/label&gt;
    &lt;input type="checkbox" id="mike" value="Mike" v-model="checkedNames"&gt;
    &lt;label for="mike"&gt;Mike&lt;/label&gt;
    &lt;br&gt;
    &lt;span&gt;Checked names: {{ checkedNames }}&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, you will see boolean value in the console.</p>
  
  <h3>Update 1. Detail case explanation</h3>
  
  <p>I'm using legacy code of the model, which is being passed as a parameter to vue component. And I need to bind component markup to the model's property (<code>_checkedNames</code> in code above simulates this model property). This property declared via getter/setter (sometimes just getter). And I want to use such a property in <code>v-model</code> construction. This case doesn't work for me. I guess vuejs can't wrap it correctly. And I'm loking for a solution (or a workaround) that will take in account mentioned restrictions.</p>
  
  <p>Here is the same question in vue forum: <a href="https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544" rel="noreferrer">https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544</a></p>