Vue - transition-group not working with different type of components

Question

I have a project where I use Vue Transitions in order to animate the sorting and filtering a grid containing car components. Each grid elements contains one car-component.

The problem is that the user can invite new users to the platform. Those new users/cars are not the same objects as the existing objects that each is shown in a car-component. In these new objects I show different type of data/information.

This is why I have chosen to show these 'new' users using a different type of component then the car-components.

The problem is that both components need to be shown inside the same CSS grid. But when I try to add both components inside a transition group, that transition group breaks and it no longer performs the sorting animations.

<transition-group class="grid">
   <InvitedUsers v-for="invite in Invited" />
   <Users v-for"user in Users" />
</transition-group>

Is there a way around this? Can I add bot set of items inside the same CSS grid and still have the transition group do its work? I have tried the following, but it doesn't work because both set of items are created in different grids. But this way the transition-group works again.

<div class="grid">
   <InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
   <Users v-for"user in Users" />
</transition-group>

Answer 1

I have struggled with the same issue once. We can not directly wrap components inside <transition-group>, there has to be another wrapper around the component.

Here is an example

<transition-group class="grid">
   <div v-for"user in Users">
     <Users />
   </div>
   <div v-for="invite in Invited">
     <InvitedUsers />
   </div>
</transition-group>

You may have to adjust your grid container a little bit.