Expected behavior

Hello, I want to detect when a TAB is clicked to identify it and inject content according to the TAG id.

Actual behavior When we click on the tab, we do not know how to identify it in order to add custom content to the TAB content.

Resources (screenshots, code snippets etc.)

<template>
  <mdb-container fluid>

    <h2 class="mb-4">Vertical pills</h2>
    <mdb-row class="mb-5">
      <mdb-col md="3">
        <mdb-tab   pills color="primary" vertical>
          <mdb-tab-item  @click="addInfo($event)" v-for="(element, index) in info"  :key="element.id" :active="vertical == index"   @click.native.prevent="addInfo($event)">
            {{element.phone}}  <mdb-icon @click="addInfo" icon="phone" class="ml-2"/>
          </mdb-tab-item>
        </mdb-tab>
      </mdb-col>
      <mdb-col md="9">
        <mdb-tab-content vertical>
          <transition-group name="slide-toggle">

            <mdb-tab-pane v-for="(element, index) in info"  :key="'pills'+index" v-show="vertical == index">
              <h5 class="my-2 h5">{{element.name}}</h5>
            </mdb-tab-pane>


          </transition-group>
        </mdb-tab-content>
      </mdb-col>
    </mdb-row>


  </mdb-container>
</template>

<script>
import axios from "axios";
import {
  mdbContainer,
  mdbRow,
  mdbCol,
  mdbTab,
  mdbTabItem,
  mdbTabContent,
  mdbTabPane,
  mdbIcon
} from "mdbvue";

export default {
  name: "tabs",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbTab,
    mdbTabItem,
    mdbTabContent,
    mdbTabPane,
    mdbIcon
  },
  data() {
    return {
      basic1: "1",
      basic2: "1",
      pills: "1",
      vertical: "1",
      basicOutside: "1",
      verticalWithin: "1",
      classic1: "1",
      classic2: "1",
      info:[],
      activeTab: 0,
    };
  },
  created(){
    console.log('created')
    axios.get("https://jsonplaceholder.typicode.com/users/").then((result) => {
      this.info = result.data;
    })
  },
  mounted(){
    console.log('Mounted')
  },
  methods:{
    addInfo: function (event) {
      console.log(event)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.slide-toggle-enter-active {
  transition: 0.3s ease-in;
  opacity: 1;
  max-height: 500px;
}
.slide-toggle-enter,
.slide-toggle-leave-active {
  opacity: 0;
  max-height: 0;
}
.slide-toggle-leave {
  opacity: 1;
  max-height: 500px;
}
</style>

Screenshots

VIDEO https://www.veed.io/view/759280cf-9ee7-4322-8d41-79ea544fec15?sharingWidget=true