carousel - nuxt で vue-glide-js イベントを使用し、最後のスライドにさらにスライドをロードする方法

Question

私はこれらすべてに慣れていないので、助けが必要です。まず最初に、vue-glide-js イベントがどのように機能するかを説明します。そのドキュメントには、例なしでそれらをリストしただけです。そして 2 番目に重要なのは、カルーセルの最後に axios リクエストを送信して、より多くのアイテムをロードしたいということです。イベントを操作できなかったので、アクティブなスライドを使用してそれを見て、最後のスライドでデータを送信して更新しましたが、スライドにはまだ前のスライドが表示されています。私は何をすべきか？

それは私のコードの簡略化されたバージョンです

<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>

ご覧のとおり、配列に手動でアイテムを追加しましたが、グライドはまだ7つのアイテムを表示しています。マウントと関係があることは知っていますが、何をすべきかわかりません。

後もう一つ。rtl とブレークポイント (異なる幅のビューごとのアイテム) をサポートするより良いカルーセルがあれば、喜んでお知らせします。タンクス