Scoped slots and transition-group

Has anyone had any experience with using <transition-group> and scoped slots together? I’ll try to provide a simplified version of my code:

From the parent component

  <template slot="slides" scope="{ slide }">
    <my-slide :itemProp="slide"></my-slide>

From the Carousel component

  <div class="c-carousel">
    <div class="c-carousel__body">
      <transition-group name="list-fade" tag="div" class="c-carousel__slides">
        <div class="c-carousel__slide list-fade-item" v-for="slide in slides" :key="slide.slug">
          <slot name="slides"

This all works as expected and of course there’s much more to the component logic than this, but the issue I have is how to define a unique key as with other carousels the slide data might not have a slug key value pair. I have tried using index and generating a unique id to use as a key, but then my transitions don’t behave as expected (which is expected as they aren’t matching values as the carousel data is updated because of an action that occurs on another page).

Can you not use the index itself?

Sadly, no. I’ll upload a couple movies to illustrate…

The good version (using slide.slug):

The bad version (using index):

Notice how the transition using slide.slug is a seamless transition whereas using index just swaps them with no transition. I’m not 100% sure why, but my guess is index is not unique enough. Thinking about it, I do an api call to get “Recently Played Games” and I am just replacing the array with the received data. Perhaps that’s part of the issue.

A bit late, but that’s completely normal behavior,

If you use the indexes as keys and then swap the items, the indexes don’t swap

Index 0 => Item 1
Index 1 => Item 2
Index 0 => Item 2
Index 1 => Item 1

This will effectively swap the position of the two items but not the keys and vue simply assumes there has been no change and will not trigger a transition