How to use modal component in parent component

modal.vue

<!-- Parent Component -->
<template>
  <div>
    <modal :show-modal="showModal">
    <h1 slot="header">{{ title }}</h1>
    <p slot="body">{{ body }}</p>
    <div slot="footer">
      <base-button
        @click.native="hideModal"
      >
        {{ buttonMessage ? buttonMessage : 'Okay' }}
      </base-button>
    </div>
  </modal>
  </div>
</template>


<script>
import Modal from '@/components/modal/modal.vue'
import BaseButton from '@/components/buttons/button-base.vue'

export default {
  name: 'InterpreterRoot',
  components: {
    Modal,
    BaseButton
  },
  data() {
    return {
     // Passes this as prop to <modal /> component
      showModal: false,
      title: 'Modal title',
      body: 'This is the modal text',
      buttonMessage: 'Got it!'
    };
  },
  methods: {
    removeModal() {
      this.showModal = false;
    },
  }
}
</script>