Let's break it down simply
The parent sends data down through props, and the child sends actions back up through events. defineEmits documents which events a component can emit and returns an emit function. Stick to kebab-case for event names.
vue
<!-- QuantityPicker.vue -->
<script setup>
const props = defineProps({ modelValue: Number })
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<button @click="emit('update:modelValue', props.modelValue - 1)">−</button>
<span>{{ props.modelValue }}</span>
<button @click="emit('update:modelValue', props.modelValue + 1)">+</button>
</template>You should see
− 2 +Try it yourself
Build a TaskItem component with a delete button, and send the task id to the parent as the delete event's payload.
Component Events — Vue.js