Vue app component

App.vue

<template>
  <div id="app">
    <button class="modal_opener" v-on:click="toggleModal()">
      Click Me! I Don't Bite... <span role="img" aria-label="emoji">😛</span>
    </button>

    <Modal
      v-bind="{ closeCallback: toggleModal, show, customClass: 'custom_modal_class'}"
    >
      <h2>Told Ya!</h2>
      <iframe title="giphy" src="https://giphy.com/embed/l52CGyJ4LZPa0" width="480" height="273" frameBorder="0" className="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/sandler-sentences-sounding-l52CGyJ4LZPa0">via GIPHY</a></p>
    </Modal>
  </div>
</template>

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

export default {
  name: 'app',
  components: {
    Modal
  },
  data: () => ({
    show: false
  }),
  methods: {
    toggleModal: function() {
      this.show = !this.show;
    }
  }
}
</script>