title: BootstrapVue b-table toggleDetails opens multiple row details
body: <p>I have an issue with Bootstrap Vue table showDetails for row.</p>
  <p>When I open website for the first time and I click show details button it shows details with loading state, fetch the data and then when completed shows the details.</p>
  <p>However when I hide the expanded row and click show Details for another row, after the fetch both of them are expended. Meaning I can see details of 2 rows.</p>
  <p>(If I open and hide X of rows, after I expand one more, all previously opened and hiden X details will be visible)</p>
  <p>Thank you for help!</p>
  <p>Toggle details Method:</p>
  <pre><code> toggleDetails(item) {
    if (item._showDetails) {
      this.$set(item, '_showDetails', false)
    } else if (this.listType === MEETING_LIST_TYPE.history) {
      this.$set(item, '_showDetails', true)
    } else {
      item._showDetails = true
      item.busy = true
      this.showMeetingDetails({
        meeting: item,
        listType: this.listType
      }).then(() =&gt; {
        item.busy = false
      })
    }
  }
  </code></pre>
  <p>Fetch method (action):</p>
  <pre><code>showMeetingDetails({ commit }, { meeting, listType }) {
    return fetchMeetingDetails(meeting).then(res =&gt; {
      commit('SET_MEETING_DETAILS', { meeting: res, listType })
    })
  }
  </code></pre>
  <p>Mutation:</p>
  <pre><code>SET_MEETING_DETAILS(state, { listType, meeting }) {
    switch (listType) {
      case MEETING_LIST_TYPE.today:
        state.todayMeetings = state.todayMeetings.map(m =&gt;
          m.meetingID === meeting.meetingId
            ? { ...m, ...meeting, _showDetails: true }
            : m
        )
        break
      case MEETING_LIST_TYPE.all:
        state.allMeetings = state.allMeetings.map(m =&gt;
          m.meetingID === meeting.meetingId
            ? { ...m, ...meeting, _showDetails: true }
            : m
        )
        break
      default:
        break
    }
  }
  </code></pre>