<script setup>
const menu = ref();
const items = ref();

const toggle = async (event: MouseEvent) => {
  const [data, _] = await Promise.all([
    () => [
      {
        label: 'Options',
        items: [
          {
            label: 'Refresh',
            icon: 'pi pi-refresh'
          },
          {
            label: 'Export',
            icon: 'pi pi-upload'
          }
        ]
      }
    ],
    sleep(1000),//Simulate asynchronous requests
  ])

  items.value = data

  menu.value.toggle(event);//event.currentTarget is null
};
</script>

<template>
  <div class="card flex justify-center">
      <Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
      <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />
    </div>
</template>
</style>