how to use vue-glide-js events on nuxt and load more slides on last one

i'm new on all of these so i need help. first of all how vue-glide-js events work to begin with. its documentation just listed them without examples. And second and more important, i wanna send an axios request at the end of my carousel and load more items. i couldn't work with events so used active slide and watched it and on last slide sent and updated my data but slide still shows the previous one. what should i do?

it is the simplified version of my code

<template>
    <div>
      <vue-glide v-bind="carouselOptions" v-model="active">
      <vue-glide-slide v-for="i in array" :key="i">
        Slide {{ i }}
      </vue-glide-slide>
    </vue-glide>
    <p>{{active}}</p>
    </div>
</template>

<script>
  export default {
    data(){
        return{
            carouselOptions:{
                direction: process.env.SITE_DIRECTION,
                autoplay: false,
                perView: this.$device.isMobileOrTablet ? 4 : 8,
                peek: { before: 0, after: 50 }
            },
            array: [1,2,3,4,5,6,7],
            active: 0
        }
    },
    watch:{
      active(){
        console.log('active = ' + this.active)
        if(this.active > this.array.length - 3){
          this.array= [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
        }
      }
    },
    mounted(){
      //
    }
  }
</script>

as you can see i manually added more items to my array but glide still show 7 items. i know it has something to do with mounting but dont know what to do.

and one more thing. if there is any better carousel that support rtl and breakpoint (items per view on different width) i would be happy to know. tanx

To use call a method at the end of slides just using @glide:run-end:

<template>
    <div>
      <vue-glide v-bind="carouselOptions" v-model="active" @glide:run-end="myMethod">
      <vue-glide-slide v-for="i in array" :key="i">
        Slide {{ i }}
      </vue-glide-slide>
    </vue-glide>
    </div>
</template>

to show the new slides, it's a bit tricky! as far as i know the only way is to refresh (reload) the component! so put a key on vue-glide and change it after each new added slides. the only problem is, if there is images on slides, old ones also will be load again. (it's a suggestion and didn't tried my self yet, but maybe with a caching system, it may be solved)