title: How to make custom checkbox component Vue correctly
body: <p>How I can create custom checkbox in Vue. And when checkbox is changed, he should call function.
  I got errors &quot;Cannot read property 'id' of undefined&quot;
  And warnings &quot;Unhandled error during execution of native event handler &quot;</p>
  <p>Custom checkbox:
  <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>&lt;template&gt;
    &lt;div class="filter"&gt;
      &lt;input
          :ref="id"
          :id="id"
          type="checkbox"
          class="filter-checkbox"
          @change="$emit('do', $emit)"
      /&gt;
      &lt;span&gt;{{ label }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "Checkbox",
    props: {
      label: {
        type: String
      },
      isSelected: {
        type: Boolean
      },
      id: {
        type: String
      }
    },
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How i want to use it inside my parent component:</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>&lt;Checkbox
     v-for="filter of filters"
     :key="filter.id"
     :label="filter.name"
     :id="filter.id"
     v-model="filter.selected"
     @do="mutuallyExclusive(filter.id)"
  /&gt;</code></pre>
  </div>
  </div>
  </p>