Reusable TransitionGroup component doesn't work as expected - vue.js

Question

I have a very simple reusable transition group component. Unfortunattely it doesn't work as expected.
Expected behavior: wrap li tag into TransitionGroup --> animation works.
Actual behavior: wrap li tag into TransitionGroup and add transition styles into that component --> animation works.
TransitionGroup component:
<template>
<transition-group name="list" tag="ul">
<slot></slot>
</transition-group>
</template>
<script>
export default {
props: {
duration: {
type: Number,
required: false,
default: 2,
},
},
};
</script>
<style scoped>
.list-enter-from {
opacity: 0;
}
.list-enter-active {
transition: opacity 1s ease-in;
}
.list-enter-to {
opacity: 1;
}
</style>
Then I'm trying to use it in ProductList component and it doesn't work:
<template>
<fade-transition-group class="products-list">
<li
class="products-list__item"
v-for="product in productsToRender"
:key="product.id"
>
<card
:image="product.image"
:price="product.price"
:title="product.title"
:rating="product.rating.rate"
:id="product.id"
></card>
</li>
</fade-transition-group>
</template>
But if I add transition styles in ProductsList component then it works. Why? How to fix that?
If I add these styles to ProductList component styles section then everything works and it's not clear why:
.list-enter-from {
opacity: 0;
}
.list-enter-active {
transition: opacity 1s ease-in;;
}
.list-enter-to {
opacity: 1;
}