How to get the Element which has the Click Event, not e.target element since e.target can be any child element of the clicked element? Vue 3 JS

I have run into a problem working with vue js.

Look at the codes. I have added a click event on the List Item. and passed the List Item as "this" in the click event. And then I selected the child "ul" element of that list item when it is clicked.

But it seems there's no way I could do exact same in Vue Js. I could pass the event and could get event.target but it only returns the clicked element not the element which has the click event attached. Let me clarify more: if I click on the any one of the child "a" element of the list item, the e.target will always return that "a" element. Not the list item itself although the click event has been attached to it. Same goes for the icon element. But I need the list item regardless of where it clicked inside the list item.

So, What I need is the Vue Js code of the pure javascript code below:

function clicked(element){
  console.log(element.getElementsByTagName("ul"));
}

<li onclick="clicked(this)">
  <a href="#" class="d-block p-3 text-white outline-none w-100 h-100">
    <i class="icon-envelope"></i> Messages
  </a>
  <ul>
    .....
  </ul>
</li>

I want something like below:

methods: clicked(element){
  console.log(element.getElementsByTagName("ul"));
}

<li @click="clicked(this)">
  <a href="#" class="d-block p-3 text-white outline-none w-100 h-100">
    <i class="icon-envelope"></i> Messages
  </a>
  <ul>
    .....
  </ul>
</li>