Modal window in vue?

Question

Vue.js

I'm trying to make a modal window on VUE.js myself (I'm just learning), can someone tell me what I'm doing wrong?
app.vue

<template>
  <div id="app">
    <Header />
    <Modal />
    <modal v-if="showModalLogin" @close="showModalLogin = false"></modal>
  </div>
</template>

<script>
  import Header from '@/components/Header.vue'
  import Modal from '@/components/Modal.vue'
  export default {
    components: {
      Header,
      Modal
    },
    data() {
      return {
        showModalLogin: false
      }
    }
  }
</script>

modal.vue

<template>
    <transition name="modal">
        <div class="modal-mask">
            1
        </div>
  </transition>
</template>
<script>
export default {
    name: 'Modal'
};
</script>

Header.vue

<template>
    <div class="page">
        <header class="header">
            <div class="container header-container">
                <div class="flex">
                    <div class="header-actions col-3l flex">
                        <button class="button header-actions__button-login" id="showModalLogin" @click="showModalLogin = true">Войти</button>
                        <button class="button header-actions__button-reg" id="showModalReg" @click="showModalReg = true">Регистрация</button>
                    </div>
                </div>
            </div>
        </header>
    <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'Header'
    };
</script>

Answer 1

1. It is not clear what your modal is, how it differs from Modal, and where the close event that it listens for should be called.
2. You are trying to update data from another component in the header.

Answer 2

https://medium.com/js-dojo/component-communication...
And Vuex

Answer 3

I do all this on vuetify, it's easy and simple, even many things go like copy-paste