Update options when a different object is passed.

Author: NaotoshiFujita

dist/js/vue-splide.cjs.js

@@ -2618,7 +2618,10 @@ const _sfc_main$1 = vue.defineComponent({
       default: "div",
       type: String
     },
-    options: Object,
+    options: {
+      default: {},
+      type: Object
+    },
     extensions: Object,
     transition: Function,
     hasTrack: {
@@ -2627,7 +2630,6 @@ const _sfc_main$1 = vue.defineComponent({
     }
   },
   setup(props, context) {
-    const { options } = props;
     const splide = vue.ref();
     const root = vue.ref();
     vue.onMounted(() => {
@@ -2641,13 +2643,11 @@ const _sfc_main$1 = vue.defineComponent({
       var _a;
       (_a = splide.value) == null ? void 0 : _a.destroy();
     });
-    if (options) {
-      vue.watch(() => merge({}, options), (options2) => {
-        if (splide.value) {
-          splide.value.options = options2;
-        }
-      }, { deep: true });
-    }
+    vue.watch(() => merge({}, props.options), (options) => {
+      if (splide.value) {
+        splide.value.options = options;
+      }
+    }, { deep: true });
     vue.provide(SPLIDE_INJECTION_KEY, splide);
     const index = vue.computed(() => {
       var _a;

dist/js/vue-splide.esm.js

@@ -2615,7 +2615,10 @@ const _sfc_main$1 = defineComponent({
       default: "div",
       type: String
     },
-    options: Object,
+    options: {
+      default: {},
+      type: Object
+    },
     extensions: Object,
     transition: Function,
     hasTrack: {
@@ -2624,7 +2627,6 @@ const _sfc_main$1 = defineComponent({
     }
   },
   setup(props, context) {
-    const { options } = props;
     const splide = ref();
     const root = ref();
     onMounted(() => {
@@ -2638,13 +2640,11 @@ const _sfc_main$1 = defineComponent({
       var _a;
       (_a = splide.value) == null ? void 0 : _a.destroy();
     });
-    if (options) {
-      watch(() => merge({}, options), (options2) => {
-        if (splide.value) {
-          splide.value.options = options2;
-        }
-      }, { deep: true });
-    }
+    watch(() => merge({}, props.options), (options) => {
+      if (splide.value) {
+        splide.value.options = options;
+      }
+    }, { deep: true });
     provide(SPLIDE_INJECTION_KEY, splide);
     const index = computed(() => {
       var _a;

examples/src/components/ReactivityExample.vue

@@ -36,8 +36,8 @@
 </template>
 
 <script lang="ts">
-import { Splide, SplideSlide, Options } from '@splidejs/vue-splide';
-import { defineComponent, reactive } from 'vue';
+import { Options, Splide, SplideSlide } from '@splidejs/vue-splide';
+import { defineComponent, reactive, ref } from 'vue';
 import { generateSlides } from '../utils';
 
 

src/js/components/Splide/Splide.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { ComponentConstructor, Options, Splide } from '@splidejs/splide';
-import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, provide, Ref, ref, watch } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, provide, Ref, ref, watch, onUpdated } from 'vue';
 import { EVENTS } from '../../constants/events';
 import { SPLIDE_INJECTION_KEY } from '../../constants/keys';
 import { merge } from '../../utils';
@@ -39,7 +39,10 @@ export default defineComponent( {
     /**
      * Options for Splide instance.
      */
-    options: Object as PropType<Options>,
+    options: {
+      default: {},
+      type   : Object as PropType<Options>,
+    },
 
     /**
      * Registers extension components.
@@ -61,7 +64,6 @@ export default defineComponent( {
   },
 
   setup( props, context ) {
-    const { options } = props;
     const splide = ref<Splide>();
     const root   = ref<HTMLElement>();
 
@@ -77,13 +79,11 @@ export default defineComponent( {
       splide.value?.destroy();
     } );
 
-    if ( options ) {
-      watch( () => merge( {}, options ), options => {
-        if ( splide.value ) {
-          splide.value.options = options;
-        }
-      }, { deep: true } );
-    }
+    watch( () => merge( {}, props.options ), options => {
+      if ( splide.value ) {
+        splide.value.options = options;
+      }
+    }, { deep: true } );
 
     provide<Ref<Splide | undefined>>( SPLIDE_INJECTION_KEY, splide );