Vueper Slides(Vue3)でasync使用のautoplay(fade)でハマった件

setupにasyncを使用している場合は問題なくautoplayが使用できるけど、onMountedでasyncすると、下記エラーで自動再生できなかったので解決までの半日を記録しておきます。（Vue3の知識も浅いので、組み方がうんこすぎて他の人には再現できないかもね！）

error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'duration')

autoplayをscript内で実行

上記エラーよりdurationの値を設定してみたが全く変化なし。
ドキュメントを確認して「resumeAutoplay」なるものの存在を確認。（ここまで2時間）
https://antoniandre.github.io/vueper-slides/

template

<button @click="$refs.myVueperSlides[`${autoPlaying ? 'pause' : 'resume'}Autoplay`]();autoPlaying = !autoPlaying">
  {{ autoPlaying ? 'Pause' : 'Resume' }}
</button>

script内で実行する必要があるので、refを使用することでtemplate内の$refsと同じことが出来る事を知る。（ここまで3時間）
サンプルソースを書いておきます。（一部抜粋）

script

<script>
import { reactive, onMounted, ref } from "vue";
import "vueperslides/dist/vueperslides.css";
import { VueperSlides, VueperSlide } from "vueperslides";

export default {
  name: "HomeView",
  components: {
    VueperSlides,
    VueperSlide,
  },
  setup(props, context) {
    const { getJson } = ComFunc();
    const myVueperSlides = ref(null); //autoplay対策
    const reacObj = reactive({
      mainSlider: {},
    });

    onMounted(async () => {
      //JSON取得
      const json = await getJson();

      //メインスライダー
      reacObj.mainSlider = Object.keys(json.main_slider).map(function (key) {
        return {
          img_path: json.main_slider[key].img_path,
          href: json.main_slider[key].href,
        };
      });
      myVueperSlides.value.resumeAutoplay();//ここがポイント
    });
    return {
      myVueperSlides,
      reacObj
    };
  },
};
</script>

この段階でautoplayが動作して一件略着かと思いきや、一枚しか再生されないというトラップが発動。（ここまで4時間）
Verが3.4.０だったので、最新の3.4.2がめっちゃ最近リリースされてたので、package.jsonを修正して、npm install。その後、template内の記述にもautoplayを追記することで、無事に機能しましたとさ。

template

<vueper-slides ref="myVueperSlides" fade autoplay>

以上、参考になれば幸いです。

追記：fadeを指定した時の現象みたいです。