Transitions not working on nuxt-child component when route changes - vue.js

Question

I want to create a very simple nuxt transition between child routes.
The structure is:
index.vue
index
--one.vue
--two.vue
--three.vue
index.vue:
<template>
<div>
<nuxt-link to="/one">one</nuxt-link>
<nuxt-link to="/two">two</nuxt-link>
<nuxt-link to="/three">three</nuxt-link>
<nuxt-child :key="$route.fullPath"></nuxt-child>
</div>
</template>
<script>
export default {
transition: 'fade',
data(){
return {
}
},
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active{
transition: all 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-leave, .fade-enter-to{
opacity: 1;
}
</style>
The child components:
one.vue:
<template>
<div>
1
</div>
</template>
two.vue
<template>
<div>
2
</div>
</template>
three.vue
<template>
<div>
3
</div>
</template>
The problem is:
that nothing happens! when I change routes, they change in a way like there is no transition.
what I have done:
I tried to do exactly what the nuxt document has said.
Also I searched a lot about it, but unfortunately, none of the similar questions have been answered.
question1
question2
question3