vue 同一页面引用多个重复组件，但不同组件内的数据感觉是混乱的，请问怎么解决？

<template>
<div class="grid gap-0 grid-cols-4 grid-rows-2 h-full pb-8">
  <Card title="导入项目排名" type="projectRank"></Card>
  <Card title="导入申请书初审结果" type="projectFirstTrial"></Card>
  <Card title="导入申请书终审结果" type="projectFinalTrial"></Card>
  <Card title="导入实施方案终审结果" type="executeFinalTrial"></Card>
  <Card title="导入机构对项目的评分" type="projectScore"></Card>
</div>
</template>

<script setup lang="ts">
import Card from "@/components/importDataCard.vue";
</script>Copy

<template>
 //子组件的 template 不止这些，为了给大家减轻阅读负担，我只贴了核心部分
<div class="w-full h-full">
    <div class="mb-6">
        <div class="flex flex-col justify-center items-center w-full h-32">
            <label :for="file ? '' : 'file-input'">
                <div class="flex flex-col justify-center items-center pt-5 pb-6">
                <template v-if="file">
                    <p class="mb-2 text-sm relative text-gray-500 dark:text-gray-400">{{ file.name }}</p>
                  </template>
                 <template v-else>
                      <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">点击上传或拖拽文件到此处</p>
                     <p class="text-xs font-extralight text-gray-500 dark:text-gray-400">仅支持 CSV</p>
                  </template>
                  </div>
                 <input id="file-input" type="file" class="hidden" @change="setFile" accept=".csv"/>
  </label>
              </div>
          </div>
     <div class="mb-6">
          <button type="button">导入数据</button>
      </div>
</div>
</template>

<script setup lang="ts">
import {ref, defineProps} from 'vue';

const props = defineProps({
  type: String,
  title: String
})

const file = ref<File|null>(null)
function setFile(e) {
  file.value = e.target.files[0]
}
</script>Copy