If you're having trouble with the carousel library because of its reactivity, it might be worth considering building your own carousel instead. It can actually serve as a great learning opportunity.
However, if you still want to use the existing library, one workaround is to wrap the carousel in a template with a conditional v-if statement. This way, when an image is deleted from the array, you can force the carousel to rerender and display the changes by toggling the v-if of the template tag. It's a bit of a hacky solution to a problem that ideally shouldn't exist in the first place, but it could work like this:
<template>
<div id="app">
<template v-if="toggle">
<carousel :items="1">
<template v-for="(img, index) in images">
<img :src="img" :key="index" />
</template>
</carousel>
</template>
<button @click="deleteImage">DELETE AN IMAGE</button>
</div>
</template>
<script>
import Carousel from "vue-owl-carousel";
export default {
name: "App",
components: { Carousel },
data() {
return {
images: [
"https://placeimg.com/200/200/any?1",
"https://placeimg.com/200/200/any?2",
"https://placeimg.com/200/200/any?3",
"https://placeimg.com/200/200/any?4",
],
toggle: true,
};
},
methods: {
deleteImage() {
this.toggle = false;
this.images.pop();
this.$nextTick(() => {
this.toggle = true;
});
},
},
};
</script>
I have tested this solution with the vue-owl-carousel library on the sandbox, and it seems to work effectively.