[VueJs] Transition sur 3 div

Bonjour,
J'essaie de faire une interface de connection en 3 parties (connexion, inscription, restauration mdp). Chaque partie s'affiche quand on clique sur le lien correspondant.
Jusque là, tout fonctionne. Pour le passage d'une partie à l'autre, j'applique une transition. La transition se fait mais elle se fait en même temps malgrés que j'ai mis "mode="out-in"".
J'aimerais que la transition "Out" se fasse en premier puis, le "In"
Voici mon code:

<template>
    <div>
        <ul class="login_menu">
            <li class="border" @click.prevent="loginForm"><a href="#"><i class="fa fa-sign-in"></i>Connexion</a></li>
            <li class="border" @click.prevent="registerForm"><a href="#"><i class="fa fa-user-plus"></i> Inscription</a></li>
            <li @click.prevent="restoreForm"><a href="#"><i class="fa fa-key"></i>Mot de pass perdu ?</a></li>
        </ul>
        <div class="login">
          <form class="form">
            <transition-group name="fade" mode="out-in" appear>
              <div v-show="login" key="login">
                Orgias resistere!Never love the body, for you cannot experience it.
              </div>
              <div v-show="register" key="register">
                detrius, byssus, et itineris tramitem.
                  Ubi est magnum bubo?
              </div>
              <div v-show="restore" key="restore">
                with watermelons drink whiskey.
                  with mackerels drink beer.
              </div>
            </transition-group>
          </form>
        </div>
    </div>
</template>

<script>
export default{
  data () {
    return {
      login: true,
      register: false,
      restore: false
    }
  },
  methods: {
    loginForm () {
      this.login = true
      this.register = false
      this.restore = false
    },
    registerForm () {
      this.register = true
      this.login = false
      this.restore = false
    },
    restoreForm () {
      this.restore = true
      this.login = false
      this.register = false
    }
  }
}
</script>

<style>
    /* Login */
    .login{
      border: 2px solid #ffffff;
      border-radius: 20px;
      margin-top: 30px;
      padding: 30px;
      height: 500px;
    }

    /* Menu */
    .login_menu{
        border: 1px solid #ffffff;
        border-radius: 20px;
        padding: 20px 0;
    }
    .login_menu li{
        display: inline;
        padding: 15px;
        font-size: 20px
    }
    .login_menu li i{
        margin-right: 15px;
    }
    .login_menu li a{
        color: #ffffff;

    }
    .border{
        border-right: 1px solid #ffffff;
    }

    /* formulaire */
    .bouton {
      display: block;
      border: 2px solid white;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 30px;
      color: white;
      margin: auto;
      text-align: center;
    }
    .cond{
      margin-bottom: 20px;
    }
    .cond label, .cond input{
      color: #ffffff;
    }
    .checkbox:checked + label:before {
      top: -4px;
      left: -3px;
      width: 12px;
      height: 22px;
      border-top: 2px solid transparent;
      border-left: 2px solid transparent;
      border-right: 2px solid white; /* You need to change the colour here */
      border-bottom: 2px solid white; /* And here */
      -webkit-transform: rotate(40deg);
      -moz-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -o-transform: rotate(40deg);
      transform: rotate(40deg);
      -webkit-backface-visibility: hidden;
      -webkit-transform-origin: 100% 100%;
      -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      -o-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }
    .fade-enter-active{
      transition: opacity 5s;
    }
    .fade-enter{
      opacity: 0;
    }
    .fade-leave-active{
      transition: opacity 5s;
    }
    .fade-leave-active{
      opacity: 0;
    }

</style>