Custom vue3 component

I'm writing a custom component, an input with a + and - button for incrementing / decrementing value in the input.

  <div class="number-input-group">
    <button
        class="button"
        @click="increment"
    >+</button>
    <input
        class="number_input"
        :name="name"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    />
    <button
        class="button"
        @click="decrement"
    >-</button>
  </div>
</template>

<script setup>

const props = defineProps({
  modelValue: { type: Number, default: 1 },
  name: { type: String, default: "" },
});

defineEmits([
  'update:modelValue'
]);


function increment() {
}

function decrement(){
}

</script>

I'm using this component like this:

<template>
    <number-input v-model="count"/>
    <div>{{ count }}</div>
</template>

<script setup>
  import {ref} from  "vue";
    const count = ref();
</script>

My question is, how do I modify (inc/dec) the modelValue in the component so it shows up in the count variable in the parent ?