title: Making Vueper-Slides work with Markdown front matter in Gridsome
body: <p>I've installed various slideshow/carousels for Vue JS but kept breaking my build, until I came across <a href="https://github.com/antoniandre/vueper-slides" rel="nofollow noreferrer">Vueper-Slides</a>.</p>
  <p>Using <a href="https://gridsome.org/" rel="nofollow noreferrer">Gridsome</a>'s <code>$page.post.slides</code> to query the front-matter metadata in my Markdown, my image array looks like this:</p>
  <pre><code>---
  title: My title
  path: /my-title
  date: 2020-09-12
  summary: Lorem ipsum dolor sit amet
  tags: [&quot;tags&quot;, &quot;tags&quot;]
  slides:
    - { image: &quot;./images/image1.jpg&quot; }
    - { image: &quot;./images/image2.jpg&quot; }
    - { image: &quot;./images/image3.jpg&quot; }
  ---
  </code></pre>
  <p>In the <code>CarouselComponent.vue</code> I have:</p>
  <pre><code>    &lt;vueper-slides&gt;
          &lt;vueper-slide
              v-for=&quot;(slide, i) in slides&quot;
              :key=&quot;i&quot;
              :image=&quot;$page.post.slides&quot;
          /&gt;
      &lt;/vueper-slides&gt;
  </code></pre>
  <p>In the script block I have:</p>
  <pre><code>import { VueperSlides, VueperSlide } from &quot;vueperslides&quot;
  import &quot;vueperslides/dist/vueperslides.css&quot;
  
  export default {
      name: &quot;CarouselComponent&quot;,
      components: { VueperSlides, VueperSlide },
      data: () =&gt; ({
          slides: [],
      }),
  }
  </code></pre>
  <p>At the moment, I'm getting a blank carousel - with no errors or [object object] for the <code>&lt;img src&gt;</code> tag in my console.</p>
  <p>Does anyone know how I can make Vueper-Slides work with Gridsome? Apologies in advance if I'm not making myself very clear, as I've just started learning VueJS. :)</p>
  <p>Many thanks in advance!</p>