完整给出最终的代码，分template和script给出

当然，这是一个简单的Vue组件示例，包含模板和脚本部分。我们将创建一个有两份文件上传区域的表单，允许用户切换上传文件的位置。

**template.vue**

<template>
  <div class="upload-container">
    <button @click="switchBox(0)">切换到文件夹1</button>
    <input type="file" multiple ref="box1" @change="handleFiles(box1.files)" :id="selectedBox === 0 ? 'box1' : ''" :disabled="selectedBox !== 0">

    <button @click="switchBox(1)">切换到文件夹2</button>
    <input type="file" multiple ref="box2" @change="handleFiles(box2.files)" :id="selectedBox === 1 ? 'box2' : ''" :disabled="selectedBox !== 1">

    <!-- 显示当前选中的文件列表 -->
    <ul v-if="files.length > 0" id="file-list">
      <li v-for="(file, index) in files" :key="index">{{ file.name }}</li>
    </ul>
  </div>
</template>

**script.vue**

<script setup>
import { ref, onMounted } from 'vue';

// 用于存储当前选中的文件列表索引
const selectedBox = ref(0);

// 初始化文件列表数据
const uploadBoxes = ref([
  { name: '文件夹1', files: [] },
  { name: '文件夹2', files: [] }
]);

// 更新文件列表
function updateFiles(boxIndex, files) {
  uploadBoxes.value[boxIndex].files = files;
}

// 处理文件上传事件
function handleFiles(files) {
  if (files.length > 0) {
    const boxIndex = selectedBox.value;
    updateFiles(boxIndex, files);
  }
}

// 切换到另一个文件夹
function switchBox(boxIndex) {
  selectedBox.value = boxIndex;
  document.getElementById(`box${boxIndex+1}`).disabled = true;
  document.getElementById(`box${boxIndex}`).disabled = false;
}
</script>

在这个例子中，当用户点击“切换到文件夹1”或“切换到文件夹2”按钮时，`switchBox`函数会更新`selectedBox`的值，然后禁用当前未选中的输入框，并启用刚刚切换的新输入框。`handleFiles`函数负责接收并处理文件上传。