如何正确制作自定义checkbox组件Vue

<template>
  <div>
    <input type="checkbox" :id="id" :checked="checked" @change="handleChange">
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    id: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      required: true
    }
  },
  methods: {
    handleChange(event) {
      this.$emit('change', event.target.checked);
    }
  }
}
</script>

<template>
  <div>
    <Checkbox id="checkbox1" :checked="isChecked" label="选项1" @change="handleCheckboxChange"></Checkbox>
  </div>
</template>

<script>
import Checkbox from './Checkbox.vue';

export default {
  components: {
    Checkbox
  },
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleCheckboxChange(checked) {
      this.isChecked = checked;
    }
  }
}
</script>