Как реализовать делегирование событий во Vue 3

Совсем недавно начал изучать Vue3 и столкнулся с такой проблемой. Имеется родительский компонент "app"

<template>
  <div class="app">
    <ts-gallery-content-navbar/>
    <ts-gallery-content-main-flex :items-flex="itemsFlex" />
    <ts-gallery-content-main-grid :items-grid="itemsGrid" style="display: none"/>
  </div>
</template>

Хочу реализовать следующий функционал: В дочернем компоненте "ts-gallery-content-navbar" имеется две кнопки, при нажатие на которые отображается галерея фотографий в определенном формате (flex/grid).

<div class="ts-gallery-content__display-contr" @click="getDisplay">
  <div class="ts-gallery-content__flex">
    <ts-icon-base name="flex" />
  </div>
  <div class="ts-gallery-content__grid">
    <ts-icon-base name="grid" />
  </div>
</div>

getDisplay(event) {
      if (
        event.target &&
        event.target.className === "ts-gallery-content__flex"
      ) {
        console.log("great");
      }
    },

При навешивании обработчика на родителя, срабатывает успешно только при непосредственном нажатии на div с классом, на который происходит проверка. При нажатии на иконку делегирование события не происходит. Как я могу реализовать это во Vue 3.