Vue.js - Issue with Menu Component and Event Handling

I'm currently working on a Vue.js project and have encountered an issue with a custom menu component. The menu is supposed to handle sorting types, and I'm using it in conjunction with a method (setSortingType) to update the sorting type when an item is selected. However, I'm facing a problem where the selected property in the event object ($event) is not behaving as expected

<menu
    ref="MenuRef"
    :items="SortTypes"
    target="#sorting-button"
    position="center"
    @clicked-away="isButtonClicked = !isButtonClicked"
    @selected="setSortingType"
/>

const SortTypes = [{labek: 'l1'}, {label: 'l2'}]

setSortingType($event) {
    // some code
}

The dropdown is properly displaying the items. and I was able to click them. But if I select the item1 initially and then if I open dropdown and click on the item2, the dropdown is closing (which is fine).

But when I select the item1 and then if I open dropdown and click on the same item1 again, it's not closing the dropdown. It's not even calling the method mentioned in @selected event.

I even tried with @click. Still not working. Where am I doing wrong.