Cannot receive event from child component vue3.0

Question

I have a button component which is a child component

<template>
  <div class="button-container">
    <el-button @click="$emit('onClick')" type="primary">{{ text }}</el-button>
  </div>
</template>

I want to emit the click event in order for parent component to receive.

Here is the parent component

<script>
import Button from "@/components/Button.vue"; 

export default { 
  components: { Button } ,
  methods: {
    toRegister() { this.$router.push('/register'); }
  }
}
</script>

<template>
   <Button @on-click="toRegister" text="Register here" textColor="#5fb878" textSize="8px"></Button>
</template>

But i don't receive any thing from here.

I thought the problem is on the event name, but after i changed the name from onClick to clicked, same problem still.