When deploying my Nuxt app in production mode to Firebase I get the following error whenever I attempt to navigate to any page other than the homepage:

Node.appendChild: Cannot add children to a Comment

I've found that when I comment my home-slider component in index.vue I no longer get this error, however commenting everything inside the home-slider while still leaving the component call throws the error.

index.vue template

<template>
  <article>
    <div v-if="slides && slides.length > 0">
      <section id="banner">
        <div class="container">
          <client-only>
            <home-slider :slides="slides"></home-slider>
          </client-only>
        </div>
      </section>
    </div>

    [...unrelated html]
  </article>
</template>

HomeSlider.vue template

<template>
  <div>
    <Splide id="home-slider" :options="options">
      <SplideSlide v-for="slide in slides" :key="slide.id">
        <a :href="slide.enlace" class="slide">
          <div
            class="slide-content"
            v-html="slide.contenido"
            v-show="slide.contenido"
          ></div>
          <div class="img-container">
            <img :src="slide.imagen" :alt="slide.titulo" />
          </div>
        </a>
      </SplideSlide>
    </Splide>
  </div>
</template>

Removing the client-only component also fixes it, but then splide won't render correctly.

According to this github issue this could be related to invalid HTML, however I can't see what's causing it, I can see that when I navigate to any route it first renders index.vue, then it tries to render the other page, is there a way to prevent other pages from rendering?

I have another Splide in a different page which doesn't seem to be giving me any issues when I navigate to the homepage.