How can I use $emit correctly?

[mbnoimi]

I use tab component as a parent component. It has onItemClick event it works fine by itself but when I call it from a child competent it doesn't work and always throws group id from child: undefined. I think this issue related to $emit as I couldn't understand it fine from vue docs.
May you please help me to get ride of undefined value?

Parent.vue

<template>
  <div>
    <DxTabs
      @item-click="$emit('groupClick', groupID)"
    />
  </div>
</template>

<script setup lang="ts">
import DxTabs from "devextreme-vue/tabs";
import { ref } from "vue";

const groupID = ref(-1);

</script>

Child.vue

<script setup lang="ts">
import Child from "@/components/Parent.vue";

function currentGroup(index: any) {
  console.log("group id from child:", index.itemIndex);
}
</script>

<template>
  <main>
    <Child
      @group-click="currentGroup"
    />
  </main>
</template>

[oumoussa98]

Yes, the issue is related to $emit function
You need to pass the $event as a second argument like so

<!-- Parent.vue  -->

<template>
  <div>
    <DxTabs
      @item-click="$emit('groupClick', $event)"
    />
  </div>
</template>