vue-slide-bar not working inside a bootstrap b-collapse when the state of collapse is closed by default

[Naveenkumar26091990]

1: inside v-for b-collapse vue-slide-bar is not working.
In B-button we have click event to refresh the vue-slide-bar.
2: In input number tag if i increase or decrease the value vue-slide-bar is not updating

<b-card class="mb-1 bg-light" v-for="(item, index) in tuning_list" :key="item.field_name">
   <b-card-header header-tag="header" class="p-1" role="tab" >
   	<b-button block v-b-toggle="'accordion-' + tuning_index" variant="light" @click="refreshSlide(item.name)">
   		<div class="col-md-12">
   			<div class="row">
   				<div class="col-md-4 text-left">{{name}} </div>
   				
   			</div>
   		</div>  
   	</b-button>
   </b-card-header>
   <b-collapse :id="'accordion-' + index" close accordion="my-accordion" role="tabpanel">
   	<b-card-body style="padding-left: 0;padding-right: 0;border-bottom: 1px solid #DAE2EB;border-top:1px solid #DAE2EB">
   	<h6>WEIGHT</h6>
   		<div class="col-md-12">
   			<div class="row">
   				<div class="col-md-10  text-left">
   					<vue-slide-bar :ref="item.name" v-model="item.weight" :data="sliderWithLabel.data" />
   				</div>   
   				<div class="col-md-2 text-right" style="display:none;">
   				  <input type="number" v-model="item.weight" step="0.1" class="form-control" min="0" max="10"/>
   				</div>
   			</div>
   		</div>
   	</b-card-body>
   </b-collapse>	
   <b-card-footer >
   </b-card-footer>
</b-card>
Below is Vue-Js Code
<script>
methods: {
   refreshSlide(strvalue){
     this.$refs[strvalue][0].refresh()
 },
}

</script>

[vishakatenfin]

I am facing the same issue. is there any solution?