New Router page doesn't load the component until manually reloading the entire page

I added a new route, and added an animation in transition to the new route.

I added the following code which pushes the new route (/first) when a button is clicked:

/* From the Template */
<router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
    <transition name="route1" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

/* From the Script */
 methods: {
    onClickTransition() {
      this.$router.push("/first");
    },

Now the problem is that when I click the button and invoke the "onClickTransition" method, the router seems to be pushed just fine, but the page is empty. The components are rendered only when I manually refresh the page by pressing ctrl+R.

I believe the problem perhaps comes from insertion of the animation, but if I refresh the page manually, the animation works just fine. So I have no idea what the problem is. I will be very grateful for help.

Here is the rest of the code for app.vue:

    <template>
  <router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
    <transition :key="$route.fullPath" name="route1" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  methods: {
    onClickTransition() {
      this.$router.push("/first");
    },
    leave(event) {
      event.preventDefault();
      event.returnValue = "";
    },
  },

  mounted() {
    window.addEventListener("beforeunload", this.leave);
  },

  beforeUnmount() {
    window.removeEventListener("beforeunload", this.leave);
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  background-color: #151515;
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0px;
}

/* route transition */
.route1-enter-from {
  opacity: 0;
}
.route1-enter-active {
  transition: all 3s ease-in;
}
.route1-leave-to {
  opacity: 0;
}
.route1-leave-active {
  transition: all 3s ease-in;
}
</style>

code section from index.js:

    import { createRouter, createWebHistory } from "vue-router";
import MainPage from "../views/MainPage.vue";
import FirstScene from "../views/FirstScene.vue";

const routes = [
  {
    path: "/",
    name: "main",
    component: MainPage,
  },
  {
    path: "/first",
    name: "first",
    component: FirstScene,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

The "onClickTransition" method comes from the "PreStartPage.vue" component, which is the child component of "MainPage.vue" which is the main route.

Once the "Next" button is clicked in the "PreStartPage.vue", it sends an event to the "MainPage.vue" with this.$emit."MainPage.vue" then receives the event with a method named "onClickNext1", which sends out a signal to "App.vue" with another this.$emit. That is where the "@clickedNext1" that is shown in the App.vue comes from.

Here is the code from "PreStartPage.vue":

    <script>
export default {
  name: "PreStartPage",
  methods: {
    onClickNext() {
      this.$emit("clickedNext");
    },
  },
};
</script>

Here is the code from "MainPage.vue":

    <script>
import PreStartPage from "../components/PreStartPage.vue";
export default {
  name: "MainPage",
  components: { PreStartPage },
  data() {
    return { showMain: true, showPre: false };
  },
  methods: {
    toggleMain() {
      this.showMain = !this.showMain;
      this.showPre = !this.showPre;
    },
    onClickNext1() {
      this.$emit("clickedNext1");
    },
  },
};
</script>