VueJS3 DOM event not forwarded to child component

I am migrating a Vue2 app to Vue3.

I am running the compatibility build (vue 3.1.0 with @vue/compat: 3.1.0).

I have custom buttons components like this:

<template>
  <button class="EditButton">
    <SvgIcon name="edit" />
    <span>Edit</span>
  </button>
</template>
<style scoped>
/* Some style */
</style>

My app currently calls this button like

<EditButton
  id="edit-button"
  :disabled="!aCondition"
  @click.native="editPost(post)"
/>

Doing this works fine. .native event modifier being deprecated in Vue 3, I removed it (see vue3 v-on-native-modifier documentation). According to the documentation, v-on listeners that are not part declared as a component event should be added as DOM event on thefirst root element (button in my case).

However that does not work. Removing .native removes the onClick listener in the $attrs of the component and here is what I get on the devTools window:

Here is my vite configuration, should it be useful

export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      vue: '@vue/compat'
    },
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    }),
    createSvgIconsPlugin({
      iconDirs: [fileURLToPath(new URL("./src/assets/icons", import.meta.url))],
      symbolId: "icon-[name]",
    }),
  ]});

My question is simple, how to handle click event in vueJS 3, what am I doing wrong?