Сбрасывать checkbox при отправке формы Vue

Нужно при отправке формы очищать ее поля и чекбокс, поля почистил, но не получается с чекбоксом, как можно исправить это?

<form @submit.prevent="sendMail">
      <IFinput
        class="contact-form__input"
        label="Your name"
        placeholder="Type here"
        :options="textInputOptions"
        v-model="mail.firstName"
      />
      <div class="contact-form__actions">
        <IFbutton
          type="submit"
          :options="btnOptions.options"
          class="contact-form__button"
        >
          Send me more information
        </IFbutton>
        <CheckBoxInput v-model="mail.newsletterSub" id="contact-terms" :dark="checkboxOptions.dark" :label="checkboxOptions.label" />
      </div>
    </form>

<script>
import CheckBoxInput from "@/components/inputs/CheckBoxInput";
import IFbutton from "@/components/buttons/if-button";
import IFinput from "@/components/inputs/if-input";

export default {
  name: "ContactForm",
  components: {
    IFinput,
    IFbutton,
    CheckBoxInput,
  },
  data() {
    return {
      mail: {
        firstName: "",
        email: "",
        question: "",
        newsletterSub: false
      }
    };
  },
methods: {
    sendMail(e) {
      e.preventDefault();
            this.$v.mail.$touch();
            // if its still pending or an error is returned do not submit
            if (this.$v.mail.$pending || this.$v.mail.$error) return;
            // to form submit after this
      alert("Form submitted");

      this.mail = {
        firstName: "",
        email: "",
        question: "",
        newsletterSub: false
      };
    },
  },

checkbox.vue

<template>
  <div :class="[`checkbox-input`, `${dark ? 'checkbox-input_dark' : ''}`]">
    <input :id="id.replace(' ', '')" type="checkbox" v-model="model" />
    <label class="body-3" :for="id.replace(' ', '')">
      {{ label }}
    </label>
  </div>
</template>

<script>
export default {
  name: "CheckBoxInput",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {},
    id: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    dark: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    model: {
      get() {
        return this.checked;
      },
      set(value) {
        this.$emit("change", value);
      },
    },
  },
};
</script>