How to emit events from grandchild to grandparent in Vue3?

How to emit events from grandchild to grandparent in Vue3?

I need to emit an event keyOn and his data from my search bar in the header to my PlayerView My search bar is inside the header and the header is inside my PlayerView. Like this: PlayerView.vue

<template>
  <HeaderComponent></HeaderComponent>
  <div class="page-content">
    <div class="first">
      <Model-component
        v-for="(player, i) in filteredProducts"
        :key="i"
        :name="player.name"
        :about="player.about"
        :socials="player.socials"
      >
      </Model-component>
    </div>
  </div>
</template>

HeaderComponent.vue

<header>
    <div class="container" ref="container">
    <div class="logo">
      <img src="/assets/images/Logo.png">
    </div>
    <input class="hamburger-button" type="checkbox"  id="hamburger-button" v-model="checked"/>
    <label for="hamburger-button">
      <div></div>
    </label>
    <div class="menu">
      <nav>
        <ul>
          <li>
            <DropUp title="MineRock" ref="link" :items="services"></DropUp>
          </li>
          <li>
            <a @click="checkedOff" ref="link1" href="/">Учасники</a>
          </li>
          <li>
              <Search-component></Search-component>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  </header>

SearchComponent.vue

<template>
  <div class="search-container">
    <input id="searchInput" type="text" placeholder="Ім'я гравця" name="search" v-model="search" @input="handleInput">
    <button  type="submit">
      <i class="fa fa-search"></i>
    </button>
  </div>
</template>

How can I do it in Vue 3 if the no more event bus or smth else?