Vue.js 3 rendering Modal component issue - vue.js

Question

In the below scenario I have a parent page in which I have group details and I have few modals as child component, below I have affixed one of the child modal. Here the issue which I am facing is whenever I open a group it is automatically running all the child components API but child modal API's are on demand. Based on the structure I am passing a groupId prop to child and mounted few endpoints for data processing.
Scenario: User opens their group, click on group member button to view the members of the group.
Parent Page:
<div class="info">
<h4>{{groupDetails.usr_gp_nm}}</h4>
<p class="mb-0"><i class="ri-lock-fill pe-2"></i>Private Group</p>
<p class = "members" role = "button" data-bs-toggle="modal" data-bs-target="#modalgroupmembers"> {{groupDetails.member_count}} members </p>
<GroupMembersModal :groupId = groupDetails.usr_gp_id />
</div>
Modal :
<template>
<modal id="modalgroupmembers" dialogClass="modal-fullscreen-sm-down" tabindex="-1" title="Create Post" aria-labelledby="modalsLabel">
<tab-nav :tabs="true" id="myTab-two">
<tab-nav-items :active="true" id="home-tab-two" ariaControls="home" href="#home-two" #click = "getGroupMembersList()" role="tab" :ariaSelected="true" title="Members" />
<tab-nav-items :active="false" id="profile-tab-two" ariaControls="profile" href="#profile-two" #click = "getGroupAdminList" role="tab" :ariaSelected="false" title="Admins" />
<tab-nav-items :active="false" id="contact-tab-two" ariaControls="contact" href="#contact-two" role="tab" :ariaSelected="false" title="Received request" />
</tab-nav>
<tab-content id="myTabContent-1">
<tab-content-item :active="true" id="home-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupMember,index1) in groupMembers" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupMember.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupMember.usr.first_nm}} {{groupMember.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
<tab-content-item :active="false" id="profile-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupAdmin,index1) in groupAdmins" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupAdmin.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupAdmin.usr.first_nm}} {{groupAdmin.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
<tab-content-item :active="false" id="contact-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupMember,index1) in groupMembers" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupMember.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupMember.usr.first_nm}} {{groupMember.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
</tab-content>
<model-footer>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="createInstCourseBatch()" data-bs-dismiss="modal">Save</button>
</model-footer>
</modal>
<template>
<modal id="modalgroupmembers" dialogClass="modal-fullscreen-sm-down" tabindex="-1" title="Create Post" aria-labelledby="modalsLabel">
<tab-nav :tabs="true" id="myTab-two">
<tab-nav-items :active="true" id="home-tab-two" ariaControls="home" href="#home-two" #click = "getGroupMembersList()" role="tab" :ariaSelected="true" title="Members" />
<tab-nav-items :active="false" id="profile-tab-two" ariaControls="profile" href="#profile-two" #click = "getGroupAdminList" role="tab" :ariaSelected="false" title="Admins" />
<tab-nav-items :active="false" id="contact-tab-two" ariaControls="contact" href="#contact-two" role="tab" :ariaSelected="false" title="Received request" />
</tab-nav>
<tab-content id="myTabContent-1">
<tab-content-item :active="true" id="home-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupMember,index1) in groupMembers" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupMember.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupMember.usr.first_nm}} {{groupMember.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
<tab-content-item :active="false" id="profile-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupAdmin,index1) in groupAdmins" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupAdmin.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupAdmin.usr.first_nm}} {{groupAdmin.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
<tab-content-item :active="false" id="contact-two" aria-labelled-by="home-tab-two">
<div class="modal-body">
<div class="col-md-12" v-for="(groupMember,index1) in groupMembers" :key="index1">
<div class="d-flex">
<a href="#">
<img :src="groupMember.usr.prfl_url_txt" alt="" class="rounded-circle" width="80" height="80">
</a>
<h5>{{groupMember.usr.first_nm}} {{groupMember.usr.last_nm}}</h5>
<br>
</div>
</div>
</div>
</tab-content-item>
</tab-content>
<model-footer>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="createInstCourseBatch()" data-bs-dismiss="modal">Save</button>
</model-footer>
</modal>
</template>
<script>
import abcApi from '../../services/abc_Api'
export default {
name: 'GroupMemberModal',
props: ['groupId'],
data () {
return {
groupMembers: [],
groupAdmins: []
}
},
computed: {
},
methods: {
getGroupMembersList () {
var data = {
groupId: this.groupId
}
abcApi.getGroupMembers(data)
.then(response => {
console.log(response.data)
this.groupMembers = response.data.members
})
.catch(e => {
console.log(e)
})
},
getGroupAdminList () {
var data = {
groupId: this.groupId
}
abcApi.getGroupAdmin(data)
.then(response => {
console.log(response.data)
this.groupAdmins = response.data.admins
})
.catch(e => {
console.log(e)
})
}
},
mounted () {
this.getGroupAdminList()
}
}
</script>