Vue.js Event Emitted in Child Component Not Detected by Parent Component

Question

I am working on a Vue.js application and facing an issue with events and event listeners among my components. I have a child component that emits an event 'refresh', but the parent component doesn't seem to capture this event.

Here is the relevant code in my child component where the event is emitted. This is actually inside an asynchronous method where I delete an image:

const removeImage = (id: number) => {
    $dialog.confirm("delete", $translate.$t('generic.delete'), async () => {
        await $fetch._delete("files/remove_file/" + id);
        $emit('refresh');
        $toast.success("The image has been deleted");
    });
}

In my parent component, I have a listener for this event which calls a get() method:

<DialogCrudItem v-model:visible="displayCrudItem" :item="item"
@refresh="get()"
@finished:delete="displayCrudItem= false; get()"
@finished:create="displayCrudItem= false; get()"
@finished:update="displayCrudItem= false; get()"/>

The removeImage method works perfectly and the image is correctly deleted as I expected. However, the parent doesn't seem to capture the 'refresh' event and hence doesn't call the get function.

It's worth mentioning that this parent component listens for the same 'refresh' event from several other components, and when these components emit the event, the get method is invoked correctly. But from this particular child component, the event is not captured.

Additionally, if I emit an event called 'finished:create' or 'finished:delete' that are also used and listened for in this child component, the parent component captures them correctly and react as expected.

I've also tried changing the name of the event from 'refresh' to something else, thinking there may be a naming conflict, but this didn't resolve the problem.

Any help is appreciated to fix this issue.