我在nuxt 3项目使用的元素加上库和我的一个页面有3个标签，我已经分为3个标签内容3组件，我已经设置了条件，最初只呈现第一个标签组件。当点击第二或第三标签，然后特定的标签组件将被呈现。
我的问题是，当我第一次在时间页面上点击第二或第三个标签时，加载组件需要一点时间（不多，但我们可以看到差异）
之后，一旦所有3个组件都加载完毕，那么每个选项卡的内容就可以顺利加载，而不需要花费时间。

<template>
<el-tabs v-model="activeTabName" @tab-click="handleClick">
  <el-tab-pane label="Tab 1" name="tab1">
    <LazyTab1
      v-if="activeTabName == 'tab1'"
      :form-data="formData"
      :loader="loader"
      @on-submit="submitForm"
    />
  </el-tab-pane>
  <el-tab-pane label="Tab 2" name="tab2">
    <LazyTab2
      v-if="activeTabName == 'tab2'"
      :form-data="formData"
      :loader="loader"
      @submit-form="submitForm"
    />
  </el-tab-pane>
  <el-tab-pane label="Tab 3" name="tab3">
    <LazyTab3
      v-if="activeTabName == 'tab3'"
      :form-data="formData"
      :loader="loader"
      @on-submit="submitForm"
    />
  </el-tab-pane>
</el-tabs>
</template>

<script setup>
const activeTabName = ref("tab1");
const formData = reactive({
  tab1: {
    ..
    ..
  },
  tab2: {
    ..
    ..
  },
  tab2: {
    ..
    ..
  }
});

//Tab click event
const handleClick = (tab, event) => {
};

//Form submit
const submitForm = async (formRef) => {
  //After form submit code
}

//Get form details
const getDetails = async () => {
  //API call and set the formData from API response
}
onMounted(() => {
  getDetails();
});
</script>

字符串
我已经在每个标签上设置了if条件，所以它一次只加载一个（当前标签），但是当我们最初切换标签时，只有在加载后第一次出现问题，它才能完美地工作。
请帮我一个方法来解决这个问题。此外，让我知道，如果有任何其他需要除了上述。
我真的很感激你能提供的任何帮助。