Transitions not working on nested router-view

I am trying to get transitions to work on a nested router-view in Vue (v3) and vue-router (v4) with no joy.

The top level router-view works as expected (App.vue) when entering the site and navigating around relevant routes.

I have tried the following in Child1.vue:

...
router-view(v-slot="{Component}")
	transition(name="fade" mode="out-in" enter-active-class="fade" leave-active-class="fade")
		component(:is="Component")
...

As well as the following in Grandchild1.vue:

...
transition(name="fade" mode="out-in" enter-active-class="fade" leave-active-class="fade")
	div
		h2 Grandchild 1
...

However, neither initiate the transition as I would expect. Can anyone point me in the right direction or provide a working example to which I can use as an example (.vue snippets below)?

APP.vue (parent)

<template lang="pug">
router-view(v-slot="{Component}")
	transition(name="hide" mode="out-in" enter-active-class="hide" leave-active-class="hide")
		component(:is="Component")
</template>

Child1.vue

<template lang="pug">
aside
	nav
		ul
			li
				router-link(:to="{name:'Grandchild1'}") Grandchild 1
			li
				router-link(:to="{name:'Grandchild2'}") Grandchild 2
main
	header
		h1 Child 1
	section
		router-view
</template>

Grandchild1.vue

<template lang="pug">
div
	h2 Grandchild 1
</template>

Any help much appreciated!