vue nuxt.js にてスマホ版のフェードインがうまくいかない

実現したいこと

トップページのフェードインで、スマホで見ると画面がチラつくを直したいです

発生している問題・分からないこと

トップページを以下のように設定しています。

初回訪問時：ロゴフェードイン・アウト → トップページフェードイン
その他：トップページフェードイン

該当のソースコード

// IndexPage.vue

<template>
  <div class="fade-in_page">
    <div class="index-page">
      <div class="contents-grid">
        <div class="emptySpace"></div>
        <div class="projects">
          <div class="project-container" v-for="item in items" :key="item.id">
            <NuxtLink :to="'/projects/' + item.projectName" class="project">
              <img :src="item.src" alt="Image" />
              <div class="text-container">
                <p class="caption">{{ item.caption }}</p>
                <p class="location">{{ item.location }}</p>
              </div>
            </NuxtLink>
          </div>
        </div>
        <div class="emptySpace"></div>
        <Footer />
      </div>
      <HeaderDesktop v-if="isDesktop" />
      <HeaderMobile v-else />
      <Fixed v-if="isDesktop" />
    </div>
  </div>
</template>

<script>
~~

  data() {
    return {
      isDesktop: false,
      items: [
~~
    };
  },
  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);

    setTimeout(() => {
      this.$el.style.opacity = 1;
    }, 500); /
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },

  methods: {
    handleResize() {
      this.isDesktop = window.innerWidth >= 768;
    },
  },
};
</script>

<style scoped>
.fade-in_page {
  transition: opacity 1.5s ease;
  opacity: 0;
}

.fade-in_page-enter-active,
.fade-in_page-leave-active {
  transition: opacity 1.5s;
}

.fade-in_page-enter,
.fade-in_page-leave-to {
  opacity: 1;
}

...
</svript>