Looking for a more elegant way to avoid transitions between nested routes

Hello,

I have the following setup

<!-- App.vue -->
<router-view v-slot="{ Component, route }">
    <transition>
        <main :key="route.name">
            <component :is="Component" />
        </main>
</transition>

<!-- Checkout.vue -->
<StepIndicator/>
<router-view/>

Checkout.vue handles the its flow using named nested routes. Navigating between these routes forces a re-render of Checkout.vue, which is not what I want.

I presume I could write a function which generates an appropriate key in App.vue thus preventing transitions for specific routes. But is there a better way to achieve this?