title: Vue.js modal window not opening on click from another component
body: <p>I'm new to Vue.js and struggling to understand how to open a modal window on click.
  Basically when I call the modal from another component I want to open the modal itself and show the data I'm passing to it from an API call. The problem is that that the modal still not shown with an inline "display:none". I'm going crazy why I cannot make it "display:block" even if I'm setting to true the prop I'm passing to the modal.
  Can anyone look at the code and advise something? I'm out of resources :/</p>
  
  <p>Modal component below:</p>
  
  <pre><code> &lt;template&gt;
        &lt;div id="modal" class="modal fade show" v-show="modalVisible" aria-labelledby="myModalLabel"&gt;
          &lt;div class="container"&gt;
            &lt;img :src="movieDetails.Poster" /&gt;
  
            &lt;div class="copy"&gt;
              &lt;p&gt;
                &lt;span&gt;Title:&lt;/span&gt;
                {{ movieDetails.Title }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Year:&lt;/span&gt;
                {{ movieDetails.Released }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Genre:&lt;/span&gt;
                {{ movieDetails.Genre }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Director:&lt;/span&gt;
                {{ movieDetails.Director }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Actors:&lt;/span&gt;
                {{ movieDetails.Actors }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;Plot:&lt;/span&gt;
                {{ movieDetails.Plot }}
              &lt;/p&gt;
              &lt;p&gt;
                &lt;span&gt;IMDB Rating:&lt;/span&gt;
                {{ movieDetails.imdbRating }}
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;button class="btn btn-light" @click="$emit('close')"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/template&gt;
  
  
      &lt;script&gt;
      export default {
        name: "Modal",
        props: ["movieDetails", "modalVisible"]
      };
      &lt;/script&gt;
  </code></pre>
  
  <p>Component I'm calling the modal from:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;h3&gt;Movies database&lt;/h3&gt;
  
      &lt;div class="input-group w-50 mx-auto"&gt;
        &lt;input
          class="form-control"
          id="input-search"
          type="text"
          v-model="textSearch"
          placeholder="Search movie by title"
        /&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button type="button" class="btn btn-primary" v-on:click="searchMovie"&gt;Go!&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="list-results" v-if="resultsFeed &amp;&amp; resultsFeed.length"&gt;
        &lt;table class="table table-hover text-left"&gt;
          &lt;thead class="thead-light"&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;Title&lt;/th&gt;
              &lt;th scope="col"&gt;Year&lt;/th&gt;
              &lt;th scope="col"&gt;Poster&lt;/th&gt;
              &lt;th scope="col"&gt;&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr v-for="result in resultsFeed" v-bind:key="result.imdbID" :data-id="result.imdbID"&gt;
              &lt;td&gt;{{ result.Title }}&lt;/td&gt;
              &lt;td&gt;{{ result.Year }}&lt;/td&gt;
              &lt;td&gt;
                &lt;img alt="movie poster" :src="result.Poster" /&gt;
              &lt;/td&gt;
              &lt;td class="text-right"&gt;
                &lt;button class="btn btn-secondary" @click="moreMovieInfo(result)"&gt;Show info&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="list-message" v-else&gt;No results!&lt;/div&gt;
  
      &lt;modal v-if="modalVisible" @close="modalVisible = false" :movieDetails="extraInfoFeed" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from "axios";
  import modal from "./Modal.vue";
  
  export default {
    name: "Search",
    components: {
      modal
    },
    data() {
      return {
        resultsFeed: [],
        extraInfoFeed: [],
        textSearch: "",
        modalVisible: false,
        modalData: null
      };
    },
  
  
  
    methods: {
      searchMovie() {
        var that = this;
        axios
          .get(
            `https://www.omdbapi.com/?s=${encodeURIComponent(
              this.textSearch
            )}&amp;apikey=a56adf1b`
          )
          .then(function(response) {
            that.resultsFeed = response.data.Search;
          })
          .catch(function(error) {
            console.log(error);
          });
      },
  
      moreMovieInfo: function(result) {
        var that = this;
        axios
          .get(
            `https://www.omdbapi.com/?i=${encodeURIComponent(
              result.imdbID
            )}&amp;apikey=a56adf1b`
          )
          .then(function(response) {
            that.extraInfoFeed = response.data;
            that.modalVisible = true;
            // document.getElementById("modal").style.display = "block";
          })
          .catch(function(error) {
            console.log(error);
          });
  
        //   this.modalData = result;
      }
    }
  };
  &lt;/script&gt;
  </code></pre>