This.$on('mouseover') equivalent in vue 3

I have the following kind of code working in a vue 2 app which is part of a sortable list. How would this work in Vue 3 when $on has been removed? Adding the event listeners to the <li> like <li @mouseover="handleMouseover"> doesn’t seem to work.

<template>
	<li :draggable="draggable">
    ...
	</li>
</template>

<script>
	export default {
        ...
		data() {
			return {
				draggable: false
			}
		}
		created() {
			this.$on('mouseover', e => {
				...
			});

			this.$on('mouseout', () => {
				...
			});

			this.$on('dragging', e => {
				...
			});
		},
	};
</script>

Bind to the actual element <li @mouseover="handleMouseOver">

More from the migration guide:

https://v3-migration.vuejs.org/breaking-changes/events-api.html

As I clearly wrote in my original post I already tried that and it didn’t work. Also, testing the same thing in the Vue 2 version of the app doesn’t produce the same result as binding in the created hook so it’s not an equivalent solution.

I did of course read the migration guide before posting here but that simply says that there is no migration path for this so that’s not very helpful.

Correct me if I’m wrong, but I think this.$on(‘mouseover’) will listen to the mouseover event on the component, i.e. one level above the DOM element (<li>). That’s why it didn’t work the same when binding the event listeners to the element. I’ve worked around it now since the implementation was a bit weird anyway.