So im making a web app with Vue 3 , in the menu, each menu button loads a component.
My intention is that every time a component loads it should have a transition, problem is, it seems to just not work, and if i add the “mode = “out in”” it just stays blank regardless of which button i click, i’ve tried the transition with other basic components ( ) and it works, just not with the components

<template>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

  <div class="page-wrapper" style="height: 100vh">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col-2" id="green" style="display: flex; flex-direction: column">
          <div class="sidebar-header">
          </div>
          <div class="sidebar-links">
            <button type="button" class="btn btn-outline-primary" id="menu-buttons"
              @click="component = 'MainHomeComponent'">
              <i class="fa-solid fa-house" id="home-icon"></i><br />Inicio
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons"
              @click="component = 'MetricMainComponent'">
              <i class="fa-solid fa-table-cells" id="metrics-icon"></i><br />Metricos
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons">
              <i class="fa-solid fa-ranking-star" id="ranking-icon"></i><br />Ranking
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons">
              <i class="fa-solid fa-magnifying-glass-chart" id="trends-icon"></i><br />Tendencia
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons">
              <i class="fa-solid fa-clipboard-question" id="status-icon"></i><br />Estatus
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons">
              <i class="fa-solid fa-clipboard-user" id="support-icon"></i><br />Soporte
            </button>
            <br /><br />
            <button type="button" class="btn btn-outline-primary" id="menu-buttons">
              <i class="fa-solid fa-gear" id="admin-icon"></i><br />Admin
            </button>
            <br /><br />
          </div>
          <div class="sidebar-footer">
            <div class="user-space">
              <button type="button" class="btn btn-outline-primary" id="logout-button">
                <span class="material-symbols-outlined" id="logout-icon">logout</span><br />Cerrar Sesion
              </button>
            </div>
          </div>
        </div>
        <div class="col-10" style="padding: 0">
          <transition name="fade">
            <div class="main-content-container">
              <component :is="component"></component>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="../css/Home.css"></style>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<script>
import MainHomeComponent from "../components/MainHomeComponent.vue";
import MetricMainComponent from "../components/MetricMainComponent.vue";

export default {
  components: {
    MainHomeComponent,
    MetricMainComponent
  },
  data() {
    return {
      component: MainHomeComponent,
    };
  },
  methods: {
  },
};
</script>

Wonder if i’m overlooking something, i’ve seen that transitions wont work on more than one root node

But like, this is one of the component i’ve tried to load with transition

<template>
  <div class="top-bar" style="height: 100px;">
    <div class="welcome-message">
      <header class="header">
        <h5 class="title-text" style="font-size: 35px;">Métricos</h5>
        <p class="subtitle-text" style="font-size: 25px;">Actualiza los métricos de las diferentes categorias.</p>
      </header>
    </div>
  </div>
  <div class="container-fluid" id="metrics-page-wrapper">
    
  </div>
</template>

<style src="../css/MetricMainComponent.css"></style>

Tried to load components dynamically with transitions