Components changing as page transition starts instead of after leave

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    pageTransition: { name: "page", mode: "out-in" }
  }
});

/* app.vue */

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

// component.vue

<script setup lang="ts">
  const props = defineProps(["tag"])
  const data = fetchSomething(props.tag)
</script>

<template>
  <div v-for="thing in data">
    {{ thing }}
  </div>
</template>

// page.vue

<template>
  <div>
    <component tag="something" />
  </div>
</template>