How can I transition components pages in vuejs?

Question

I would like to alter components an Logo Image and a Form, When I click in Logo it transition for Form. Reading the documents it's simple, but I couldn't do it work. I don't know if it is missing something.

Index.vue:

    <template>
      <v-app>
        <transition name="fade" mode="out-in">
        <Logo @click="show = !show" key="logo" />
        <Form key="form" v-if="show"  />
        </transition>
      </v-app>
    </template>
    
    <script>
    export default {
      components:{
        Logo: () => import('./components/Logo-Image'),
        Form: () => import('./components/Image-Form'),
      }
    }
    </script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Logo.vue:

<template>
    <v-container fill-height fluid>
        <v-row align="center"
            justify="center">
            <v-col
            align="center"
            justify="center">
                <a><v-img src="/img/logo.png" max-height="360" max-width="570"></v-img></a>
            </v-col>
        </v-row>
    </v-container>
</template>

Form.vue

       <template>
 <v-container fill-height fluid>
            <v-row align="center"
                justify="center">
                <v-col
                align="center"
                justify="center">
                    <v-card
                        max-width="300"
                    >
                        <v-img
                        src="/img/logo.png"
                        max-height="360"
                        max-width="520"
                        >
                        </v-img>
                        <v-card-text>
                            <v-text-field
                                label="CPF"
                                
                            >
                            </v-text-field>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </template>

Answer 1

In your Index.vue there's no data () which you would need to hold the value for show:

<script>
export default {
  components: {
    Logo: () => import('./components/Logo-Image'),
    Form: () => import('./components/Image-Form')
  },
  data () {
    return {
      show: true
    }
  }
}
</script>

Then, if you want the form replacing the logo on click, you would have to toggle them like this:

<transition name="fade">
  <Logo v-if="show" @click="show = !show" key="logo" />
  <Form v-else key="form" />
</transition>

Example:

new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fade">
    <div v-if="show" @click="show = !show" key="logo">Logo</div>
    <div v-else key="form">Form</div>
  </transition>
</div>

Answer 2

You must add data and v-if to logo

 <template>
  <v-app>
    <transition name="fade" mode="out-in">
    <Logo @click="show = !show" v-if="!show" key="logo" />
    <Form key="form" v-if="show"  />
    </transition>
  </v-app>
</template>

<script>
export default {
  data:{
    return(){
       show: false
    }
  },
  components:{
    Logo: () => import('./components/Logo-Image'),
    Form: () => import('./components/Image-Form'),
  }
}
</script>