How to make elements appear and disappear with animation in a vue component?

Transitioning Between Elements

const vm = new Vue({
  el: '#app',
  data() {
    return {
      sections: [{
          title: "Section A",
          description: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        },
        {
          title: "Section B",
          description: "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
        }
      ],
      activeSectionIndex: 0,
    }
  },
  computed: {
    activeSection() {
      return this.sections[this.activeSectionIndex]
    }
  },
  methods: {
    nextSection() {
      this.activeSectionIndex++
      if(this.activeSectionIndex >= this.sections.length) this.activeSectionIndex = 0
    }
  },
  mounted() {
    this.timer = setInterval(() => this.nextSection(), 3000)
  },
  destroyed() {
    clearInterval(this.timer)
  }  
})

.slide-fade-enter-active {
  transition: all .8s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
  <transition name="slide-fade" mode="out-in">
    <div :key="activeSection.title">
      <p> {{ activeSection.title }} </p>
      <p> {{ activeSection.description }} </p>
    </div>
  </transition>
</div>

This is my solution:

Note: I am using quasar vuejs framework

Enabling animations in quasar:

quasar.conf.js

animations: "all",

src/store/general/state.js

export default function () {
  return {
    /* Home Page Landing Section data */
    landingSectionItems: [
      {
        title: `Altiyan Childs`,
        description: `Altijan Juric[2] (born 10 June 1975), best known by his stage name Altiyan Childs, is an Australian singer-songwriter.[3] He was the winner of the second season of The X Factor Australia in 2010.`,
        buttonLink: "AboutUs",
        buttonLabel: "Know More",
      },
      {
        title: `Freemasonry`,
        description: `Freemasonry or Masonry refers to fraternal organisations that trace their origins to the local guilds of stonemasons that, from the end of the 13th century, regulated the qualifications of stonemasons and their interaction with authorities and clients.`,
        buttonLink: "AboutUs",
        buttonLabel: "Know More",
      },
      {
        title: `Satanism`,
        description: `Satanism is a group of ideological and philosophical beliefs based on Satan. Contemporary religious practice of Satanism began with the founding of the atheistic Church of Satan in America in 1966, although a few historical precedents exist.`,
        buttonLink: "AboutUs",
        buttonLabel: "Know More",
      },
    ],

    activeLandingSectionItem: 0,
  };
}

src/store/general/mutations.js

export const changeLandingSectionItem = (state) => {
  if (state.activeLandingSectionItem >= state.landingSectionItems.length - 1) {
    state.activeLandingSectionItem = 0;
  } else {
    state.activeLandingSectionItem++;
  }
};

src/components/home/LandingSection.vue

<template>
  <div class="landing-section">
    <div class="landing-section__text-box">
      <transition name="fade-title" mode="out-in">
        <div :key="items[activeItem].title">
          <p
            class="landing-section__text-box__title"
            v-html="items[activeItem].title"
          ></p>
        </div>
      </transition>
      <transition name="fade-description" mode="out-in">
        <div :key="items[activeItem].title">
          <p class="landing-section__text-box__description">
            {{ items[activeItem].description }}
          </p>
        </div>
      </transition>

      <transition name="fade-button" mode="out-in">
        <div :key="items[activeItem].title">
          <q-btn
            class="q-mt-md"
            :to="{ name: items[activeItem].buttonLink }"
            padding="0.8rem 2.5rem"
            outline
            rounded
            color="white"
            :label="items[activeItem].buttonLabel"
          />
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const $store = useStore();
    const items = computed(() => {
      return $store.state.general.landingSectionItems;
    });
    const activeItem = computed(() => {
      return $store.state.general.activeLandingSectionItem;
    });

    const changeItem = () => {
      $store.commit("general/changeLandingSectionItem");
    };

    const changeItemTimer = setInterval(() => {
      changeItem();
    }, 8000);

    onMounted(() => {
      changeItemTimer;
    });

    onUnmounted(() => {
      clearInterval(changeItemTimer);
    });

    return {
      items,
      activeItem,
      changeItem,
    };
  },
};
</script>

<style scoped>
.landing-section {
  width: 100%;
  height: 37rem;
  background: url("/images/landing-section/landing-img.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 20%;
  display: flex;
  align-items: center;
}
.landing-section__text-box {
  width: 33rem;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2rem;
}
.landing-section__text-box__title,
.landing-section__text-box__description,
.landing-section__text-box__learn-more-button {
  color: white;
}
.landing-section__text-box__title {
  font-size: 2rem;
  font-weight: 700;
}
.landing-section__text-box__description {
  font-size: 1rem;
  font-weight: 500;
}
::v-deep(.block) {
  font-weight: 700;
}

/* Animations */

.fade-title-enter-active {
  animation: fadeInDown 1s;
}
.fade-title-leave-active {
  animation: fadeOutUp 1s;
}

.fade-description-enter-active {
  animation: fadeInRight 1s;
}
.fade-description-leave-active {
  animation: fadeOutRight 1s;
}

.fade-button-enter-active {
  animation: fadeInUp 1s;
}
.fade-button-leave-active {
  animation: fadeOutDown 1s;
}
</style>