Child to Parent Component Data Passing Functionality

I have a counter component:

<script setup>
import {ref, watch} from 'vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  }
})
const count = ref(props.modelValue);

const increment = () => {
  count.value++;
};
const decrement = () => {
  if (count.value>0){
    count.value--;
  }
};



watch(
    count,
    newValue => {
      emit('update:modelValue', newValue);
    },
    {immediate: true}
);
</script>

<template>
  <div class="input-group mb-3">
    <button :class="{'disabled':count===0}" @click="decrement" class="btn btn-danger" type="button" id="button-addon1">
      <i class="bi bi-dash-circle"></i>
    </button>
    <input
        type="text"
        readonly
        class="form-control text-center"
        :value="count"
        placeholder=""
    />
    <button @click="increment" class="btn btn-primary" type="button" id="button-addon1">
      <i class="bi bi-plus-circle"></i>
    </button>
  </div>
</template>

And parent view:

<script setup>
import Breadcrumb from "@/components/Breadcrumb.vue";
import Counter from "@/components/Counter.vue";

const toaster = createToaster({position: 'top'});
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {createToaster} from "@meforma/vue-toaster";

const meals = reactive([]);
const errors = ref([]);
const members = ref([]);

const form = reactive({
  date: '',
  member: '',
  lunch: 0,
  dinner: 0
});

const saveMeal = async () => {
  try {
    let response = await axios.post('http://127.0.0.1:8000/api/meal/store', form);
    formReset();
    toaster.success(response.data);
  } catch (e) {
    console.log(e);
    if (e.response.status === 422) {
      errors.value = e.response.data.errors;
    }
  }
}
const formReset = () => {
  form.date = '';
  form.member = '';
  form.lunch = 0;
  form.dinner = 0;
}


</script>

<template>
  <div class="container-fluid">
    <div class="row">
      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <Breadcrumb>
          Meals(0)
          <template #btn-list>
            <h5 class="text-end">Month: February, 2023</h5>
          </template>
        </Breadcrumb>
        <div class="row">
         
          <div class="col-md-4">

            <div class="card border-0 shadow-sm">
              <div class="card-body">
                <form @submit.prevent="saveMeal">
                  <div class="mb-3">
                    <label for="" class="form-label">Date<span class="text-danger">*</span></label>
                    <input type="date" v-model="form.date" :class="{'is-invalid':errors.date}" class="form-control"
                           placeholder="DD-MM-YYYY">
                    <div v-if="errors.date" class="invalid-feedback">{{ errors.date[0] }}</div>
                  </div>
                  <div class="mb-3">
                    <label for="member" class="form-label">Member<span class="text-danger">*</span></label>
                    <select name="member" :class="{'is-invalid':errors.member}" v-model="form.member" id="member"
                            class="form-control">
                      <option value="">Select Member</option>
                      <option v-for="member in members" :value="member.id" :key="member.id">{{ member.name }}</option>
                    </select>
                    <div v-if="errors.member" class="invalid-feedback">{{ errors.member[0] }}</div>
                  </div>
                  <div class="mb-3">
                    <label for="member" class="form-label">Lunch<span class="text-danger">*</span></label>
                    <Counter  v-model="form.lunch"></Counter>
                  </div>
                  <div class="mb-3">
                    <label for="member" class="form-label">Dinner<span class="text-danger">*</span></label>
                    <Counter v-model="form.dinner"></Counter>
                  </div>
                  <div class="d-grid gap-2">
                    <button class="btn btn-success btn-md"><i class="bi bi-save"></i> Save Meal</button>
                  </div>

                </form>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

when I am storing a meal form reset lunch and dinner could not reset 0 how to do this?

Thank You