Vue Carousel not working with page-query

[josbroers]

Bug Report

Current Behavior Vue Carousel doesn't compile. It only shows <!---->

Input Code and steps to reproduce

<template>
  <Carousel :autoplay="true" :autoplayHoverPause="true" :autoplayTimeout="4000" :paginationEnabled="false" :perPage="1">
    <Slide :key="edge.node.id" class="slide" v-for="edge in $page.post.edges">
      <v-lazy-image
        :alt="edge.node.title"
        :src="edge.node.image + '/640/640.webp'"
        :src-placeholder="edge.node.image + '/640/640.webp?blur=10'"
        :srcset="
          edge.node.image + '/320/480.webp 320w,' +
          edge.node.image + '/480/480.webp 480w,' +
          edge.node.image + '/640/640.webp 640w'"
        class="slide__image"
        sizes="(max-width: 640px) 100vw, 640px"
        use-picture
      >
      </v-lazy-image>
      <g-link :title="edge.node.title" :to="edge.node.path" class="slide__content">
        <div>{{ edge.node.title }}</div>
        <div class="slide__svg-wrapper">
          <font-awesome icon="arrow-right"/>
        </div>
      </g-link>
    </Slide>
  </Carousel>
</template>

<script>
  export default {
    name: "VueCarousel",
      components: {
        Carousel: () =>
          import ('vue-carousel')
            .then(m => m.Carousel)
            .catch(error => {
              throw error
          }),
        Slide: () =>
          import ('vue-carousel')
            .then(m => m.Slide)
            .catch(error => {
              throw error
          })
     },
  }
</script>

<page-query>
query {
  post: allPost(
    filter: { category: { in: ["nieuws"] } }
    sortBy: "date"
    order: DESC
    limit: 4
  ) {
    edges {
      node {
        title
        date (format: "DD MMMM YYYY")
        path
        image
      }
    }
  }
}
</page-query>

Expected behavior/code The Vue-Carousel working and getting data from a markdown file.

[josbroers]

I removed vue-carousel. Couldn't get it to work and honestly, carousels are pretty bad for UX.