bootstrap-vue is opening before data is updated to api call

Question

Is there a way to wait until my data of teamId is updated before opening the bootstrap-vue modal? At the moment on the first click to open the modal, the table in ModalResults is blank, on the second click, it's populated with the table data correctly, using teamId in the get api call. The data is always one click behind the actual click of the teamId clicked.

parent component:

    <tr v-for="(item,i) in standings"
                :key="i"
                :class="defineColor(item)"
                @click="getTeamId(item.team.id)"
                v-b-modal="'modalId' + i">

<ModalContent :standings="standings" :teamId="teamId" />
...
data() {
    return {
      teamId: Number
    };
  },
methods: {
    getTeamId(teamId) {
      console.log("league Table: ", teamId);
      this.teamId = teamId;
    },

child component ModalContent:

<template>
  <div>
    <b-modal :id="'modalId' + i" v-for="(item,i) in standings" :key="'teamDetails'+ i"> 
     <ModalResults :results="results" />
    </b-modal>
...

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 => {
          this.results = response.data.matches;
          console.log("this.results: ", this.results);
        })
        .catch(error => console.log(error));
    }
  },

  watch: {
    teamId() {
      let teamId = this.$props.teamId;
      console.log("teamId watched: ", teamId);
      teamId && this.getResults(teamId);
    }
  }
};

Answer 1

The answer was to call this.$bvModal.show(id) inside the get api request, after the response, to ensure that the teamId has a value first before opening the modal. bootstrap-vue modal

Parent Component:

           <tr
            v-for="(item,i) in standings"
            :key="i"
            :class="defineColor(item)"
            @click="getTeamId(item.team.id, i)">

<ModalContent :standings="standings" :teamId="teamId" />

...

data() {
    return {
      teamId: Object
    };
  },

methods: {
    getTeamId(teamId, index) {
      let teamIdObj = {
        teamId: teamId,
        teamIndex: index
      };
      return (this.teamId = teamIdObj);
    },

In child component watch the object prop, save it to the data, then use this.$bvModal.show("modalId" + teamId.teamIndex);:

methods: {
    getResults(teamId) {
      getData.getTeamResults
        .get(teamId.teamId + "/matches?status=FINISHED")
        .then(response => {
          this.results = response.data.matches;
          console.log("this.results: ", this.results);
          console.log("getResults object: ", teamId);
          this.$bvModal.show("modalId" + teamId.teamIndex);
        })
        .catch(error => console.log(error));
    }
watch: {
    teamId() {
      this.teamId = teamId;
      console.log("teamId watched: ", this.teamId);
      this.getResults(this.teamId);
    }
  }