JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

<script id="modal-template" type="text/x-template">
  <transition name="modal">
    <div class="modal">
      <form @submit.prevent>
        <h1>Сделать заказ</h1>
        <icon @click="$emit('close')">✕</icon>
        <label>
          Контакт для связи
          <input v-model="contact" placeholder="Мессенджер или e-mail" required="required">
        </label>
        <button class="modal__button button" type="submit" @click="onClick">Отправить</button>
      </form>
    </div>
  </transition>
</script>

<div id="app">
  <modal
    v-if="showModal"
    @close="showModal = false"
  ></modal>

  <a class="button button--small" @click="showModal = true">Заказ</a>
</div>

CSS

* {
  font-family: '-apple-system', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.modal__button {
  background-color: #746bfb !important;
}

.button {
  background-color: #007aff;
  color: #fff;
  padding: 10px;
  display: block;
  width: 120px;
  text-align: center;
  border-radius: 5px;
  margin-right: 0 auto;
  border: none;
  margin-top: 10px;
}

JavaScript

Vue.component('modal', {
  template: '#modal-template',
  data: () => ({
    contact: '',
  }),
  methods: {
    onClick() {
      if (this.contact) {
        this.$emit('close');
      }
    },
  },
});

new Vue ({
  el: '#app',
  data: () => ({
    showModal: false,
  }),
});