【vue】Webサイト開いたときのロゴのフェードについて、フェードアウトはできるのに、フェードインができない

実現したいこと

Webサイトに訪問した際、初回のみロゴを表示するindexを作りたいのですが、うまくいきません。
テストなので、今は初回のみ表示ではなく、読み込むたびにロゴが表示される設定になっています。

【具体的な流れ】
白背景 > ロゴフェードイン > ロゴ表示 > ロゴフェードアウト > 白背景 > コンテンツ（index）フェードイン

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

白背景 > ロゴフェードインの部分がうまくいきません。
ページの表示と同時に、ロゴがそのまま表示されてしまいます。
ロゴ表示からあとはうまくいきます。

該当のソースコード

vue.js
1<template>
2  <div class="body">
3    <div v-if="showLogo" class="○○○" :class="{ 'fade-out': fadeOut }">
4      <img
5        :src="svgPath"
6        class="○_logo"
7        :class="{ 'fade-in-logo': fadeInLogo }"
8      />
9    </div>
10    <div v-else class="index" :class="{ 'fade-in': fadeIn }">
11      <!-- Your index content goes here -->
12      <div class="contents_grid">
13        <div class="emptySpace"></div>
14        <div class="projects">
15          <div class="project_container" v-for="item in items" :key="item.id">
16            <NuxtLink :to="'/projects/' + item.projectName" class="project">
17              <img :src="item.src" alt="Image" />
18              <div class="text_container">
19                <p class="caption">{{ item.caption }}</p>
20                <p class="location">{{ item.location }}</p>
21              </div>
22            </NuxtLink>
23          </div>
24        </div>
25        <div class="emptySpace"></div>
26        <Footer />
27      </div>
28      <HeaderDesktop v-if="isDesktop" />
29      <HeaderMobile v-else />
30      <Fixed v-if="isDesktop" />
31    </div>
32  </div>
33</template>
34
35<script>
36import HeaderDesktop from "@/components/HeaderDesktop.vue";
37import HeaderMobile from "@/components/HeaderMobile.vue";
38import Footer from "@/components/Footer.vue";
39import Fixed from "@/components/Fixed.vue";
40export default {
41  components: {
42    HeaderDesktop,
43    HeaderMobile,
44    Footer,
45    Fixed,
46  },
47  data() {
48    return {
49      svgPath: "/○.svg",
50      showLogo: true, //ロゴが表示されるべきかどうか
51      fadeInLogo: true, //ロゴがフェードインするかどうか
52      fadeIn: false,
53      fadeOut: false,
54      isDesktop: false,
55      items: [
56        {
57          id: 1,
58          src: "/projects/○.jpg",
59          order: 1,
60          caption: "○",
61          location: "○",
62          projectName: "○",
63        },
64        {
65          id: 2,
66          src: "/projects/○.jpg",
67          order: 2,
68          caption: "○",
69          location: "○",
70          projectName: "○",
71        },
72        {
73          id: 3,
74          src: "/projects/○",
75          order: 3,
76          caption: "○",
77          location: "○",
78          projectName: "○",
79        },
80      ],
81    };
82  },
83  transition: "fade",
84  watch: {
85    showLogo(value) {
86      this.fadeInLogo = !value;
87    },
88  },
89  mounted() {
90    this.handleResize();
91    window.addEventListener("resize", this.handleResize);
92    this.handleFade();
93  },
94  beforeDestroy() {
95    window.removeEventListener("resize", this.handleResize);
96  },
97  methods: {
98    handleResize() {
99      this.isDesktop = window.innerWidth >= 768;
100    },
101    handleFade() {
102      setTimeout(() => {
103        this.fadeOut = true;
104
105        setTimeout(() => {
106          console.log("Setting fadeInLogo to true");
107          this.fadeInLogo = true;
108        }, 1000);
109
110        setTimeout(() => {
111          this.showLogo = false;
112          this.fadeIn = true; 
113        }, 600); // 白背景からindexフェードインにかかる時間
114      }, 2000); // ロゴフェードアウト開始までの時間
115    },
116  },
117};
118</script>
119
120<style scoped>
121.○○○ {
122  display: flex;
123  align-items: center;
124  justify-content: center;
125  height: 100vh;
126}
127.fade-in-logo {
128  opacity: 1;
129  transition: opacity 1000ms; /* ロゴ専用のフェードイン時間 */
130}
131.fade-in {
132  opacity: 1;
133  transition: opacity 600ms;
134}
135.fade-out {
136  opacity: 0;
137  transition: opacity 600ms;
138}
139/* */
140.body {
141  font-family: "futura-pt", "HarmonyOS Sans SC", "sans-serif" !important;
142  letter-spacing: 1em;
143}
144p,
145a {
146  font-size: 10px;
147  letter-spacing: 0.05em;
148  color: #333;
149  text-decoration: none;
150  padding: 0;
151  margin: 0;
152}
153/* 0 */
154.projects,
155.project {
156  font-size: 0;
157}
158.project {
159  position: relative;
160}
161img {
162  width: 100%;
163  height: auto;
164}
165/* PC */
166@media (min-width: 768px) {
167  .mk-architects_logo {
168    height: auto;
169    width: 280px;
170  }
171  .contents_grid {
172    display: grid;
173    grid-template-columns: 33% 1fr;
174    padding-top: 130px;
175    min-height: 100vh; /* 追加 */
176  }
177  .projects {
178    display: grid;
179    grid-template-columns: 1fr 1fr;
180    gap: 26px;
181    margin-right: 80px;
182  }
183  .project {
184    position: relative;
185    display: grid;
186  }
187  .project::before {
188    content: "";
189    position: absolute;
190    width: 100%;
191    height: 100%;
192    background: rgba(0, 0, 0, 0.6);
193    transition: opacity 0.6s ease;
194    opacity: 0;
195  }
196  .project:hover::before {
197    opacity: 1;
198  }
199  .project:hover .text_container {
200    opacity: 1;
201  }
202  .text_container {
203    position: absolute;
204    left: 26px;
205    bottom: 30px;
206    display: flex;
207    flex-direction: column;
208    opacity: 0;
209    transition: opacity 0.6s ease;
210  }
211  .text_container p {
212    color: #fff;
213  }
214  .caption {
215    font-size: 12px;
216    letter-spacing: 0.06em;
217    font-weight: 400;
218  }
219  .location {
220    font-size: 10px;
221    letter-spacing: 0.06em;
222    font-weight: 400;
223    padding-top: 2px;
224  }
225}
226/* Tablet */
227@media (max-width: 767px) {
228  .mk-architects_logo {
229    height: auto;
230    width: 240px;
231  }
232  .contents_grid {
233    padding-top: 88px;
234    margin: 0 16px;
235  }
236  .project_container {
237    padding-bottom: 32px;
238  }
239  .project_container:last-child {
240    padding-bottom: 0;
241  }
242  .text_container {
243    display: flex;
244    flex-direction: column;
245    padding-top: 10px;
246  }
247  .caption {
248    font-size: 11px;
249    letter-spacing: 0.06em;
250  }
251  .location {
252    font-size: 10px;
253    letter-spacing: 0.06em;
254  }
255  /* None */
256  .emptySpace {
257    display: none;
258  }
259}
260/* SP */
261@media (max-width: 375px) {
262  .project_container {
263    padding-bottom: 24px;
264  }
265  /* None */
266  .emptySpace {
267    display: none;
268  }
269}
270</style>