Video Splide not added in dynamic mode

[KGB1st]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.1

Description

Direct adding video to Splide not works properly

<template>
  <Splide 
    :options="options" 
    :extensions="extensions" 
    ref="refNewsListSplider">
  </Splide>
</template>

<style scoped>
.splide__slide img {
  vertical-align: middle;
}
</style>

<script>
let NewsListSplider = null;

import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { Video } from '@splidejs/splide-extension-video';

import { defineComponent, onMounted, ref } from 'vue';

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
import '@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css';

export default defineComponent({
  components: {
    Splide,
    SplideSlide,
  },
  setup() {
    const options = {
      rewind : true,
      height: '320px',
      pagination: false,
      gap : '2rem',
      heightRatio: 0.5625,
    };
    const refNewsListSplider = ref();
    NewsListSplider = refNewsListSplider;
    onMounted(
      () => {
        if ( refNewsListSplider.value && refNewsListSplider.value.splide ) {
          refNewsListSplider.value.splide.add( '<li class="splide__slide"><img class="img-fluid rounded-2 w-100" src="/img/noimage.png"></li>' );
        }
      }
    );
    return {
      options,
      extensions: { Video },
      refNewsListSplider,
    }
  },
  data() {
    return {
    }
  },
  methods: {
    change(images) {
      NewsListSplider.value.splide.remove(Array.from(Array(100).keys()));
      images.forEach(img => {
        NewsListSplider.value.splide.add(
          '<li class="splide__slide d-flex" style="height: 360px; justify-content: center;">\
              <img class="text-center img-fluid rounded-2" style="max-height: 360px;" src="'+img+'">\
          </li>'
        );
      });
    },
    insertVideo(path) {
      NewsListSplider.value.splide.add(
        '<li class="splide__slide d-flex" data-splide-html-video="'+path+'" style="height: 360px; justify-content: center;">\
            <img class="text-center img-fluid rounded-2" style="max-height: 360px;" src="./img/preview_video1.png">\
        </li>'
      );
      console.log('Trying to insert the video..\n'+path);
    }
  },
})
</script>

No video slide shown(only preview image) after trying to update slider section directly _this.$refs._BaseImageSlider.insertVideo('./img/newspost/inner-img/'+res.news_video); But this method based on change method which also works for adding images. Got instruction from https://splidejs.com/extensions/video/#overview

P.S. I add my content directly because using an AXIOS AJAX features. And it works if slide will be static added into template section. So problem with add() method only for video extension and I don't know why it happens.

P.S.S. Found that it works as in GUIDE. But I've not a lot of experience in VUE and not fully understand how I can update videos variable and update SpliteSlide after template will be loaded..

<template>
  <div id="post-images">
    <Splide ref="splide" :options="options" :extensions="extensions">
      <SplideSlide v-for="( id, index ) in videos" :key="id" :data-splide-html-video="id">
        <img src="/img/preview_video1.png" class="text-center img-fluid rounded-2" style="height: 100%;">
      </SplideSlide>
    </Splide>
    <br>
    <label for="formImageMultiple" class="form-label">Загрузка изображений</label>
    <input class="form-control" type="file" @change="onFileChange" id="formImageMultiple" multiple>
    <br>
  </div>
</template>

Tried to load dynamically for SplideSlide section and got same broken slide :\

<SplideSlide v-model="UpdateVideos" v-for="( id, index ) in UpdateVideos" :key="id" :data-splide-html-video="id">
    <img src="/img/preview_video1.png" class="text-center img-fluid rounded-2" style="height: 100%;">
</SplideSlide>

Reproduction Link

No response

Steps to Reproduce

Please look up!

Expected Behaviour

I thought it would work like such as with images :)