animation problem

[Atom02]

hi, this pagestack works great, but something minor bugged me alot :D.. i integrated vue-page-stack with quasar. App.vue

<template>
  <router-view v-slot="{ Component }">
    <vue-page-stack>
      <component :is="Component" :key="$route.fullPath"></component>
    </vue-page-stack>
  </router-view>
</template>
<script>
export default {
  name: "App",
  inheritAttrs: true,
  customOptions: {},
};
</script>

mylayout and pages .vue

<template>
  <q-layout view="hHh LpR fFf" style="width: 100%; height: 100%">
    <q-page-container>
      <router-view v-slot="{ Component }">
        <transition
          appear
          :enter-active-class="enterAnim"
          :leave-active-class="leaveAnim"
        >
          <component
            class="my-comp"
            :is="Component"
            :key="$route.fullPath"
            style="position: absolute; width: 100%"
          ></component>
        </transition>
      </router-view>
    </q-page-container>
  </q-layout>
</template>
<style scoped>
.my-comp {
  --animate-duration: 0.4s;
}
</style>
<script>
export default {
  name: "MyLayout",
  inheritAttrs: true,
  customOptions: {},
};
</script>
<script setup>
// import VuePageStack from "vue-page-stack";
import { defineComponent, ref, onMounted, nextTick, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

const route = useRoute();

const enterAnim = ref("animated slideInRight");
const leaveAnim = ref("animated slideOutLeft");
watch(route, (to) => {
  console.log(to.params, route.path);
  if (to.params["stack-key-dir"] === "forward") {
    console.log("forward");
    enterAnim.value = "animated slideInRight";
    leaveAnim.value = "animated slideOutLeft";
  } else {
    console.log("back");
    enterAnim.value = "animated slideInLeft";
    leaveAnim.value = "animated slideOutRight";
  }
});
</script>

when i navigation with router.back() . the animation works at it should be,

but when i use router.push('/someroute') to a route from routeA to routeB, the routeA just disappear, but routeB animating enter just right.