title: Vue.Js, binding a value to a checkbox in a component
body: <p>I'm making a component which is a wrapper around a checkbox (I've done similar with inputs of type 'text' and 'number') but I cannot get my passed in value to bind correctly.</p>
  
  <p>My component is:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="field"&gt;
      &lt;label :for="name" class="label"&gt;
        {{ label }}
      &lt;/label&gt;
      &lt;div class="control"&gt;
        &lt;input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" /&gt;
      &lt;/div&gt;
      &lt;p v-show="this.hasErrors" class="help has-text-danger"&gt;
        &lt;ul&gt;
          &lt;li v-for="error in errors" :key="error"&gt;{{ error }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: 'check-edit',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      label: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      },
      errors: {
        type: Array,
        default: () =&gt; []
      }
    },
    mounted () {
    },
    computed: {
      listeners () {
        return {
          // Pass all component listeners directly to input
          ...this.$listeners,
          // Override input listener to work with v-model
          input: event =&gt; this.$emit('input', event.target.value)
        }
      },
      hasErrors () {
        return this.errors.length &gt; 0
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've imported it globally; and am invoking it in another view by doing:</p>
  
  <pre><code>&lt;check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"&gt;&lt;/check-edit&gt;
  </code></pre>
  
  <p>My model is in data and the property ShowInCalendar is a boolean and in my test case is true. So when I view the page the box is checked. Using the Vue tools in firefox I can see the model.ShowInCalendar is true, and the box is checked. However, when I click it the box remains checked and the value of ShowInCalendar changes to 'on', then changes thereafter do not change the value of ShowInCalendar.</p>
  
  <p>I found this example here: <a href="https://jsfiddle.net/robertkern/oovb8ym7/" rel="nofollow noreferrer">https://jsfiddle.net/robertkern/oovb8ym7/</a> and have tried to implement a local data property for it but the result is not working.</p>
  
  <p>The crux of what I'm trying to do is have the initial checkstate of the checkbox be that of ShowInCalendar (or whatever property is bound via v-model on the component) and then have that property be update (to be true or false) when the checkbox is checked.</p>
  
  <p>Can anyone offer me any advice please?</p>
  
  <p>Thank you.</p>