Передача события родительскому компоненту с помощью Nuxt.JS

У меня есть простой компонент заголовка, который содержит кликабельный гамбургер, я хочу разделить гамбургер на отдельный компонент, но событие click больше не работает, когда я это делаю, я думаю, что мне нужна какая-то логическая опора, но не могу найти объяснение, или я ищу неправильную вещь.

Это работает как один компонент

/ компоненты / заголовок.вю

<template>
  <div class="--row header__wrapper" :class="{active: menuClose}">
    <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuClose: false,
    };
  }
};
</script>

Ниже не работает как событие щелчка при разделении на два компонента, где я застрял.

/ компоненты / заголовок.вю

<template>
<div class="--row header__wrapper" :class="{active: menuClose}">
        <Hamburger/>
</div>
</template>

<script>
import Hamburger from "~/components/Hamburger.vue";
  export default {
    components: {
      Hamburger
    }
  }
};
</script>

/ компоненты / гамбургер.вю

<template>
  <button class="hamburger" :class="{active: menuClose}" @click="menuClose=!menuClose">
    <span></span>
    <span></span>
    <span></span>
  </button>
</template>

<script>
export default {
  data() {
    return {
      menuClose: false
    };
  }
};
</script>