title: Pre checking checkbox using Vuejs and v-model
body: <p>I have a series of checkboxes that are bound to the <code>v-model</code> with a value.</p>
  <p>However when you come to the page I need some of the checkboxes pre-checked. I can't use the <code>:checked</code> binding as i'm using the <code>v-model</code> and I need the v-model to pass a value to my <code>checkedNames</code> array.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id='example-3'&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;jack&quot; value=&quot;Jack&quot; v-model=&quot;checkedNames&quot; PRE-CHECK-THIS-CHECKBOX&gt;
    &lt;label for=&quot;jack&quot;&gt;Jack&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;john&quot; value=&quot;John&quot; v-model=&quot;checkedNames&quot;&gt;
    &lt;label for=&quot;john&quot;&gt;John&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;mike&quot; value=&quot;Mike&quot; v-model=&quot;checkedNames&quot;&gt;
    &lt;label for=&quot;mike&quot;&gt;Mike&lt;/label&gt;
    &lt;br&gt;
    &lt;span&gt;Checked names: {{ checkedNames }}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>new Vue({
    el: '#example-3',
    data: {
      checkedNames: []
    }
  })
  </code></pre>