V-Slide-Group Nuxt SSR - Does not render arrows

[tbarus]

When redernign page from SSR, the row shows with no arrows.
Subsequent Card has max-width of 270, but the slide arrows do not render.
Additionally, when in mobile view, the items overlap the container and do not scroll "1 by 1" in full, but rather offset and cut off cards horizontally.
The main div is a css grid 1fr.

Browse

<section class="content py-5">
  <div
    class="channel-wrapper"
    v-for="channel in channels"
    :key="channel.id"
  >
    <!-- Header Section -->
    <div class="channel-header">
      <h3>
        {{ channel.name }}
        <span class="float-right text-body-2">
          <nuxt-link :to="`channel/${channel.slug}`"
            >See All</nuxt-link
          ></span
        >
      </h3>
    </div>
    <!-- Slider Section  -->
    <div>
      <v-slide-group show-arrows>
        <v-slide-item
          v-for="(list, index) in channel.lists"
          :key="index"
        >
          <CardsCardBasic
            :link="`/list/${list.slug}`"
            :image="list.images[0].image"
            :title="list.name"
            :subtitle="list.parent.name"
          />
        </v-slide-item>
      </v-slide-group>
    </div>
    <hr />
  </div>
</section>

<script> import { mapGetters } from "vuex"; export default { computed: { ...mapGetters({ channels: "browse/getChannels", }), }, }; </script> <style> .v-slide-group__prev .v-icon { font-size: 38px; } .v-slide-group__next .v-icon { font-size: 38px; } .image-lighten { opacity: 0.6; } </style>