[Vue warn]: Invalid watch source

[empty333]

Hello. When trying to use the carousel in nuxt3, it gives an error to the console with the following content:

[Vue warn]: Invalid watch source:  {
  itemsToShow: 1,
  itemsToScroll: 1,
  wrapAround: false,
  snapAlign: 'center',
  transition: 300,
  breakpoints: undefined,
  autoplay: 0,
  pauseAutoplayOnHover: false,
  modelValue: undefined,
  mouseDrag: true,
  touchDrag: true,
  settings: {}
} A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types

Example code:

<script setup>
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
</script>

<template>
        <Carousel>
            <template #slides>
                <Slide v-for="(slide, index) in 10" :key="index">{{ slide }}</Slide>
            </template>
            <template #addons>
                <navigation />
                <pagination />
            </template>
        </Carousel>
</template>

[empty333]

The carousel works without errors only if you wrap it in client-only, but then SSR support is lost

[Uneo7]

Same error here with nuxt 3 as well 🙂

[driss-chelouati]

Same error here with custom SSR setup made wih vite and Vue 3

[Vue warn]: Invalid watch source:  {
  itemsToShow: 9,
  itemsToScroll: 1,
  wrapAround: false,
  snapAlign: 'center',
  transition: 300,
  breakpoints: undefined,
  autoplay: 0,
  pauseAutoplayOnHover: false,
  modelValue: undefined,
  mouseDrag: true,
  touchDrag: true,
  settings: {}
} A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

[heychazza]

Same error here with custom SSR setup made wih vite and Vue 3

[Vue warn]: Invalid watch source:  {
  itemsToShow: 9,
  itemsToScroll: 1,
  wrapAround: false,
  snapAlign: 'center',
  transition: 300,
  breakpoints: undefined,
  autoplay: 0,
  pauseAutoplayOnHover: false,
  modelValue: undefined,
  mouseDrag: true,
  touchDrag: true,
  settings: {}
} A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

Same thing..

[ismail9k]

Fixed in v0.1.36