vue transition components disappear during animation

Question

I am using Vue Transition when navigating between pages and found a problem. I have a table, components inside it, and when I start to make a transition to a new page, the animation starts and some of the components from the table disappear, the table re-renders and blinks before completing the transition. For a long time I could not understand what the problem was, until I myself reproduced it in the codepan by the link https://codepen.io/gleb-shalajkin/pen/PoGgejp. Go to the table page by clicking on the button, and then return to the main page and pay attention to the v-chip. It will disappear from you during the transition. The problem is that for the table I use the template of a certain field, and inside this template I use another template, only this time the v-tooltip. This problem occurs due to the fact that there is another template inside the template. So far, I have no idea how to solve it. I would be grateful for any help.

Code from codepan:

const Main = {
    template: '#contacts'
}

const ChildComponent = {
  template: "#childComponent"
}

const Table = {
  components: {
    'child-component': ChildComponent
  },
  data () {
    return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        items: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
                    {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
                    {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          }
        ],
      }
  },
  computed: {
      vTable () {
        return {
          options: {
            itemsPerPage: 15
          },
          headers: this.headers,
          items: this.items,
          footerProps: {
            itemsPerPageText: 'Кол-во элементов на странице',
            itemsPerPageOptions: [15, 30, 50, 100]
          },
          noDataText: 'Нет данных',
          loadingText: 'Идет загрузка...'
        }
    }
  },
  template: "#table"
}

const routes = [
    {path: '/', name: 'Main', component: Main},
    {path: '/table', name: 'Table', component: Table }
]

const router = new VueRouter({
    routes
})

new Vue({
  vuetify: new Vuetify(),
    router
}).$mount('#app');

.fade-enter-active,
.fade-leave-active {
  transition-duration: 1.2s;
  transition-property: opacity;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="contacts">
  <v-btn block color="red" dark :to="{ name: 'Table' }">Go to tables</v-btn>
</script>

<script type="text/x-template" id="childComponent">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-chip
                color="action"
                dark
                v-bind="attrs"
                v-on="on"
            ><slot></slot></v-chip>
          </template>
          <span>test</span>
        </v-tooltip>
</script>

<script type="text/x-template" id="table">
  <div>
    <v-btn block color="red" dark :to="{ name: 'Main' }">Go to main</v-btn>
    <v-data-table
       v-bind="vTable"
    >
     <template v-slot:[`item.name`]="{ item }">
       <!--test child component -->
       <child-component>
         <strong>{{ item.name }}</strong>
       </child-component>
      </template>
    </v-data-table>
  </div>
</script>

<v-app id="app">
  <v-main>
     <keep-alive>
      <transition
          name="fade"
          mode="out-in"
      >
        <router-view></router-view>
      </transition>
    </keep-alive>
  </v-main>
</v-app>