title: Vue.js Modal component shows up in component list, but the modal doesn't actually show
body: <p>I'm trying to display an items details on click of a button, I have the data going to the modal properly, but I can't seem to get the modal to actually show up. I've tried different implementations of a modal in the template, and the closes I've gotten was having a grey screen show up on the button press. I'm at a loss of what to do at this point because every tutorial I try on modals doesn't seem to work for me. I'm using VUE CLI version 2</p>
  <p>Home.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;Navbar /&gt;
      &lt;Ordertiles @childToParent=&quot;onClickChild&quot;/&gt;
      &lt;div v-if=&quot;showModal&quot;&gt;
      &lt;Modal @close=&quot;toggleModal&quot; :header=&quot;item.header&quot; :text=&quot;item.text&quot; :image=&quot;item.img&quot;/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // @ is an alias to /src
  import Navbar from '@/components/Navbar.vue'
  import Ordertiles from '@/components/Ordertiles.vue'
  import Modal from '@/components/Modal.vue'
  
  export default {
    name: 'Home',
    components: {
      Navbar,
      Ordertiles,
      Modal
    },
    data() {
      return {
        item: '',
        showModal: false
      }
    },
  
    methods: {
      toggleModal() {
        this.showModal = !this.showModal
      },
      onClickChild(item) {
        this.item = item
        console.log(this.item)
        this.toggleModal()
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Modal.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;modal&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;modal__title&quot;&gt;Direction&lt;/div&gt;
        &lt;p&gt;{{header}}&lt;/p&gt;
        &lt;img v-bind:src=&quot;image&quot;&gt; 
        &lt;p&gt; {{text}} &lt;/p&gt;
        &lt;button class=&quot;mt-3 border-b border-teal font-semibold&quot;&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    props: ['header', 'text', &quot;image&quot;],
    methods: {
      close () {
        this.$emit('close')
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style lang=&quot;css&quot; scoped&gt;
    .modal {
      background-color: rgba(0, 0, 0, 0.7);
    }
  &lt;/style&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eyPH4.png" rel="nofollow noreferrer">Before Clicking the button</a>
  <a href="https://i.stack.imgur.com/AVb3h.png" rel="nofollow noreferrer">After button click</a></p>