how to implement dynamic autoupdate of title bar in vue? - html

Question

I am very new to web dev and i am trying to resolve this issue from quite some time, please help me with this,
I have implemented a series of verticle slides each slide contains 10 images and every time i reach bottom i call next images from api call. now i wish to print no. of slide i am presently active on I used below code for it but this way on going to top or below value of slide no. increments and finally becomes constant.
<div class="left">
{{slideno}}
</div>
<div v-for="(images, index) in slides"
:key="index" >{{setslideNumber(index)}}
<div class="container read">
<div
class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12 reader-section"
>
<div
id="carousel-pager"
class="carousel slide "
data-ride="carousel"
data-interval="1000"
>
<div class="carousel-inner vertical">
<div class=" item" style="object-fit: fill;">
<div
v-for="(image, index) in images"
:key="index"
class="section"
style="color:#fff"
>
<img
:src="
image
"
class="img-responsive"
data-target="#carousel-main"
data-slide-to="0"
width:100
/>
</div>
<div v-if="images.length" v-observe-visibility="handleScrolledToBottom"></div>
</div>
</div>
<a
class="left carousel-control"
href="#carousel-pager"
role="button"
data-slide="prev"
>
<span
class="glyphicon glyphicon-chevron-up"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control"
href="#carousel-pager"
role="button"
data-slide="next"
>
<span
class="glyphicon glyphicon-chevron-down"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
methods: {
setSlideNumber(index){
this.slideno=index+1;
},
}
what value of sliden0 i am getting: 123....10
what i need the value of slide that is visible,