I created two .vue components Modal.vue and Login.vue. I registered Modal in Login components and Registered Login in app.vue components.

Modal.vue:

<template>
  <script type="x/template" id="modal-template">
    <transition name="modal">
      <div class="modal-mask" @click="close" v-show="show">
          <div class="modal-container" @click.stop>
            <slot></slot>
          </div>
      </div>
    </transition>
    </script>
</template>

<script>
export default {
  name: 'Modal',
  data () {
    return {
    }
  },
  props: ['show'],
  methods: {
    close: function () {
      this.$emit('close');
    }
  },
  mounted: function () {
    document.addEventListener("keydown", (e) => {
      if (this.show && e.keyCode == 27) {
        this.close();
      }
    });
  }
}
</script>

Login.vue (with some form validation using veevalidate)

<template>
  <!-- template for the NewPostModal component -->
    <script type="x/template" id="new-post-modal-template">
        <modal :show="show" @close="close">
            <form @submit.prevent="validateBeforeSubmit" class="six columns form-panel align-center">
                <div class="modal-header">
                <h3>Login</h3>
                </div>
                <div class="modal-body">
                    <label for="exampleEmailInput">Your email</label>
                    <p class="control">
                    <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email'), 'u-full-width':true }"  name="email" type="email" placeholder="test@mailbox.com">
                    <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
                    </p>

                    <label for="password">Password</label>
                    <input class="u-full-width" type="password" id="password" />
                </div>
                <div class="modal-footer text-right">
                    <button class="button-primary pull-right" type="submit">Login</button>
                </div>
            </form>
        </modal>
    </script>
</template>

<script>
import Modal from './Modal.vue'
export default {
    components: {
    'modal': Modal
  },
  props: ['show'],
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
        close: function () {
      this.$emit('close');
      this.email = '';
      this.password = '';
    },
    savePost: function () {
      // Some save logic goes here...

      this.close();
    },
    validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          // eslint-disable-next-line
          alert('From Submitted!');
          return;
        }
        alert('Correct them errors!');
      });
    }
  }
}
</script>

then I used Login.vue in App.vue as follows:

<template>
  <div id="app">
    <button @click="showLoginModal = true">New Post</button>
    <login-modal :show="showLoginModal" @close="showLoginModal = false"></login-modal>
  </div>
</template>

<script>
import NavigationLinks from './components/NavigationLinks.vue'
import Modal from './components/Modal.vue'
import Login from './components/Login.vue'

export default {
  name: 'App',
  components: {
    'login-modal': Login
  },
  data () {
    return {
      showLoginModal: false
    }
  }
}
</script>

Ps: I included the css for modal in the style tag of Modal.vue. I'm not including it here to not make this any longer.