How to display modal in from child in parent component

Question

I am using Vuejs 2 and integrated Vue Material into my project.

I am still new to Vue, please bear with me.

So, I have three components:

• Parent.vue
• Child.vue
• Modal.vue

Modal.vue is a child of Child.vue that is displayed when a button in Child.vue is clicked.

Here's what it looks like:

<template>
  <div class="">
      <p class="text-center">This is a child component!</p>
      <md-button class="md-info" @click="modalDisplayShow">Show Modal</md-button>
      <modal v-if="modalDisplay" @close="modalDisplayHide">
          <template slot="header">
              This is the modal header.
          </template>
          <template slot="body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate a quo, ullam, perspiciatis eveniet nostrum ab, fugiat quod voluptas reiciendis praesentium quas similique ratione molestiae animi nulla! Autem, nam. Iure.
          </template>
          <template slot="footer"></template>
      </modal>  
  </div>
</template>

<script>
import {Modal} from "@/components"

export default {
    components: {
        Modal
    },
    data() {
        return {
            modalDisplay: false
        };
    },
    methods: {
        modalDisplayShow() {
            this.modalDisplay = !this.modalDisplay

            if(this.modalDisplay == true) {
                console.log("Modal is opened.")
            }
            else {
                console.log("Modal is closed.")
            }
        },
        modalDisplayHide() {
            this.modalDisplay = false
        }
    }
}
</script> 

Child.vue is imported in Parent.vue as a tab content:

<template>
    <div class="md-layout">
      <nav-tabs-card no-label tabs-plain>
       <template slot="content">
           <md-tabs md-alignment="centered">

            <md-tab id="child" md-label="CHILD">
             <child-tab/>
            </md-tab>
                        
        </md-tabs>
      </template>
    </nav-tabs-card>
  </div>
</template>

<script>
//tab content import
import childTab from "./Child.vue";

export default {
   components: {
    "child-tab": childTab
   }
};
</script>

Child.vue is now a tab content, but when I click the button in it to display the modal, it does not show. The console, tho, returns when the modal should have had opened or closed.

I tried the ref as I've seen here but it also does the same. I still cannot see the modal displayed.

Also, when I was setting up the modal in the Child.vue and have not made a button to call it yet, I noticed that it was displayed but is restricted to the size of the tab. Is there a way to display it on top of it like it was on the parent component?