title: Use v-model with a checkbox when v-for is used with properties of an object
body: <p>Using <code>v-model</code> with a checkbox works <strong>when <code>v-for</code> is used with an array of objects</strong>:</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>new Vue({
    el: '#example',
    data: {
      names: [
        { name: 'jack', checked: true },
        { name: 'john', checked: false },
        { name: 'mike', checked: false }
      ]
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id='example'&gt;
    &lt;div v-for="(item, index) in names" :key="index"&gt;
    &lt;input type="checkbox" :id="item.name" v-model="item.checked"&gt;
    &lt;label :for="item.name"&gt;{{ item.name }} {{ item.checked }}&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using <code>v-model</code> with a checkbox doesn't work <strong>when <code>v-for</code> is used with properties of an object</strong>:</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>new Vue({
    el: '#example',
    data: {
      names: {
        jack: true,
        john: false,
        mike: false
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id='example'&gt;
    Does not work with v-for:
    &lt;div v-for="(value, key, index) in names" :key="index"&gt;
    &lt;input type="checkbox" :id="key" v-model="value"&gt;
    &lt;label :for="key"&gt;{{ key }} {{ value }}&lt;/label&gt;
    &lt;/div&gt;
    But it does work without v-for:
    &lt;br&gt;
    &lt;input type="checkbox" id="jack" v-model="names.jack"&gt;
    &lt;label for="jack"&gt;jack&lt;/label&gt;
    &lt;br&gt;
    &lt;input type="checkbox" id="john" v-model="names.john"&gt;
    &lt;label for="john"&gt;john&lt;/label&gt;
    &lt;br&gt;
    &lt;input type="checkbox" id="mike" v-model="names.mike"&gt;
    &lt;label for="mike"&gt;mike&lt;/label&gt;
    &lt;br&gt;
    And it even changes the checkbox above!
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But using <code>v-model</code> with a checkbox works <strong>with properties of an object without <code>v-for</code></strong>!</p>
  
  <p>Why is that? How can I fix it? I really need <code>v-for</code> to <strong>work with properties of an object</strong>!</p>
  
  <p>EDIT: I don't need an array of checked values, I need to change the exact values of the properties of the object.</p>