title: Can't pass checked value to parent component from custom checkbox component
body: <p>In my custom checkbox component, I'm trying to pass the value of the checkbox form field to my parent component: </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="custom-checkbox"&gt;
      &lt;div :class="{ 'bg-white': value }"&gt;
        &lt;input
          :id="checkboxId"
          type="checkbox"
          :checked="value"
          v-model="value"
          @change="$emit('input', $event.target.checked)"
        /&gt;
      &lt;/div&gt;
  
      &lt;label :for="checkboxId"&gt;
        &lt;slot /&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      checkboxId: {
        type: String,
        default: "checkbox-1"
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Getting this error:</p>
  
  <blockquote>
    <p>[Vue warn]: Avoid mutating a prop directly since the value will be
    overwritten whenever the parent component re-renders. Instead, use a
    data or computed property based on the prop's value. Prop being
    mutated: "value"</p>
  </blockquote>
  
  <p>I tried to add:</p>
  
  <pre><code>data() {
    return {
      checkedValue: this.value
    };
  }
  </code></pre>
  
  <p>... then replace <code>v-model="value"</code> with <code>v-model="checkedValue"</code> but the checkbox doesn't check anymore and I still don't get the value of it in parent component.</p>
  
  <p>Any suggestion?</p>