NuxtJs- Javascript оставил переходный хук, не вызывая Gsap Tween

Question

Я пытаюсь сделать переходы страниц с помощью Nuxt js и Gsap с помощью хуков javascript (beforeEnter,enter, exit), ввод работает хорошо, но что-то происходит с хуком отпускания, потому что не отображается анимация.

У меня есть 2 страницы (Индекс и О)

Index.vue

<template>
   <div class="design">
     <h1>Home Page</h1>
        <nuxt-link class="link" to="/              about">Go to about page</nuxt-link>
       <div id="box" class="box"></div>
       <div class="overlay"></div>
   </div>
 </template>

 <script>
     import { TweenLite } from "gsap";
     export default {
         transition: {
            mode: "out-in",
            css: false,
            beforeEnter: function(el) {
              el.style.opacity = 0;
            },
            enter: function(el, done) {
            console.log("Enter to Index");
           TweenLite.to(el, 3, {
           opacity: 1,
          onComplete: done
       });
          done();
      },
   leave(el, done) {
        console.log("Leave from Index");
       const overlay = document.querySelector(".overlay");
    TweenLite.to(overlay, 1, {
         width: "100%",
         onStart: () =>    console.log("Animation Start"),
    onComplete: done
  });
   }
  }
   };
 </script>

About.vue

<template>
   <div class="design">
      <h1 id="title" class="title">About    Page</h1>
     <nuxt-link exact class="link" to="/">Back to home</nuxt-link>
    <div class="overlay"></div>
     </div>
 </template>

 <script>
    import { TweenLite } from "gsap";
    export default {
    transition: {
      css: false,
      mode: "out-in",
      beforeEnter: function(el) {
     el.style.opacity = 0;
   },
  enter(el, done) {
  console.log("Enter to Design");
  TweenLite.to(el, 3, {
    opacity: 1,
    onComplete: done
  });
  done();
},
leave(el, done) {
  console.log("Leave from Design");
  const overlay = document.querySelector(".overlay");
  TweenLite.to(overlay, 1, {
    width: "100%",
    onStart: () => console.log("Animation Start"),
    onComplete: done
    });
  }
}
 };
</script>

Я что-то пропустил? Я уверен, что это должно работать

Это мой текущий package.json

{
   "name": "page-transitions",
    "version": "1.0.0",
    "description": "My solid Nuxt.js    project",
    "author": "Me",
    "private": true,
   "scripts": {
       "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
       "build": "nuxt build",
       "start": "cross-env NODE_ENV=production node server/index.js",
      "generate": "nuxt generate"
     },
      "dependencies": {
         "cross-env": "^5.2.0",
         "express": "^4.16.4",
         "gsap": "^2.1.3",
         "nuxt": "^2.5.1"
   },
  "devDependencies": {
   "nodemon": "^1.18.9"
  }  
}

Кроме того, я делаю коды и коробку с точно таким же кодом и, что любопытно... это работает! Я не знаю, что здесь происходит, если я что-то упустил или мой конфиг, вот ссылка на коды и окно

Gsap Страница Переходы Nuxt

Я надеюсь, что кто-то может объяснить мне, что здесь происходит