title: How to close a modal by clicking on the backdrop in Vue.js
body: <p>I have created a simple reusable modal component using Vue.js and it works fine, but I want to make so that when I click on the backdrop the modal closes, how can I achieve this? I searched and found a similar question on stackoverflow:
  <a href="https://stackoverflow.com/questions/50610426/vuejs-hide-modal-when-click-off-of-it">vuejs hide modal when click off of it</a>
  And did the same that the accepted answer does, putting <code>@click="$emit('close')"</code> on the wrapper but the modal does not get closed by clicking the backdrop as it is in the provided example. Here is my code:</p>
  
  <pre><code>&lt;template&gt;
   &lt;div :class="backdrop" v-show="!showModal"&gt;
        &lt;div class="modal-wrapper"&gt;
          &lt;div class="modal-container" :class="size"  @click="$emit('close')"&gt;
            &lt;span class="close-x" @click="closeModal"&gt;X&lt;/span&gt;
            &lt;h1 class="label"&gt;{{label}}&lt;/h1&gt;
            &lt;div class="modal-body"&gt;
              &lt;slot&gt;&lt;/slot&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'custom-modal',
    data() {
      return {
        showModal: false
      };
    },
    props: {
      label: String | Number,
      size: String,
      backdrop: String
    },
    components: {
      'custom-btn': customBtn
    },
    methods: {
      closeModal() {
        this.showModal = true;
      }
    }
  };
  
  &lt;/script&gt;
  
  &lt;style&gt;
  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  
  .modal-container {
    margin: 0px auto;
    padding: 20px 30px;
  
    border-radius: 2px;
    background-color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
  
  }
  
  .close-x {
    color: #00A6CE;
    float: right;
  }
  
  .close-x:hover {
    cursor: pointer;
  }
  
  &lt;/style&gt;
  </code></pre>