Emitting events

You have a Vue component called ChildComponent that emits a custom event called 'custom-event' to its parent component. However, when the event is emitted, the parent component is not receiving it.

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="emitEvent">Click me</button>
  </div>
</template>

<script setup>
const emit = defineEmits(['custom-event']);

const emitEvent = () => {
  emit('custom-event', 'Some data');
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <p>Received data: {{ eventData }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import {ref} from 'vue';

const eventData = ref('');

const handleEvent = (data) => {
  eventData.value = data;
};
</script>

What could be the possible bug causing the event not to be received by the parent component, and how would you fix it?