I was trying to make a simple function in the parent element that updates a variable when it gets an emit from the child element. I've been stuck on it for 2 hours and I'm fed up because I know that the answer will be so simple.

Code in question:

Child element:

<div v-on:click="$emit('event1')">
      Click
</div>

Parent element:

<p @event1="test()"></p>
<Section /> // the child element

methods: {
   test() {
       console.log("test")
   },
}

The code above doesn't log anything. I've made it as minimal because no outside factor would change the outcome of the code.

Thanks in advance!