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

Question

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

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

/components/Header.vue

<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>

Приведенное ниже не работает, поскольку теряет событие щелчка при разделении на два компонента, в которых я застрял.

/components/Header.vue

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

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

/components/Hamburger.vue

<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>

Answer 1

Отправьте событие от Child родительскому компоненту и сделайте menuClose через опору в дочернем компоненте. Реализовать очень просто, следите

https://vuejs.org/v2/guide/components.html

Nuxt не имеет ничего общего с событиями.

ИЗМЕНИТЬ Я создал для вас пример

https://codesandbox.io/embed/codesandbox-nuxt-v5l5m?fontsize=14