title: bootstrap-vue is opening before data is updated to api call
body: <p>Is there a way to wait until my data of <strong>teamId</strong> is updated before opening the bootstrap-vue modal? At the moment on the first click to open the modal, the table in <strong>ModalResults</strong> is blank, on the second click, it's populated with the table data correctly, using <strong>teamId</strong> in the get api call. The data is always one click behind the actual click of the <strong>teamId</strong> clicked.</p>
  
  <p>parent component:</p>
  
  <pre><code>    &lt;tr v-for="(item,i) in standings"
                  :key="i"
                  :class="defineColor(item)"
                  @click="getTeamId(item.team.id)"
                  v-b-modal="'modalId' + i"&gt;
  
  &lt;ModalContent :standings="standings" :teamId="teamId" /&gt;
  ...
  data() {
      return {
        teamId: Number
      };
    },
  methods: {
      getTeamId(teamId) {
        console.log("league Table: ", teamId);
        this.teamId = teamId;
      },
  </code></pre>
  
  <p>child component ModalContent:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-modal :id="'modalId' + i" v-for="(item,i) in standings" :key="'teamDetails'+ i"&gt; 
       &lt;ModalResults :results="results" /&gt;
      &lt;/b-modal&gt;
  ...
  
  export default {
    name: "ModalContent",
    props: {
      standings: Array,
      teamId: [Function, Number]
    },
    components: { ModalResults },
    data() {
      return {
        results: []
      };
    },
    methods: {
      getResults(teamId) {
        getData.getTeamResults
          .get(teamId + "/matches?status=FINISHED")
          .then(response =&gt; {
            this.results = response.data.matches;
            console.log("this.results: ", this.results);
          })
          .catch(error =&gt; console.log(error));
      }
    },
  
    watch: {
      teamId() {
        let teamId = this.$props.teamId;
        console.log("teamId watched: ", teamId);
        teamId &amp;&amp; this.getResults(teamId);
      }
    }
  };
  </code></pre>