1、将列表和列表项组件化，使用filter来声明式的定义待办清单和完成清单 2、将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中。 3、可以考虑使用element-plus组件库来美化应用。 根据上述要求完成修改现在的代码

在 Vue.js 中，将列表和列表项组件化，使用 `filter` 和声明式编程创建待办事项（Todo）列表是非常常见的做法。这里是一个简化的示例，展示了如何实现：

1. **待办清单和完成清单组件化**:

<template>
  <div>
    <h2>待办事项</h2>
    <input v-model="newItem" placeholder="添加新任务..."/>
    <button @click="addNewItem">添加</button>
    
    <ul>
      <li v-for="(item, index) in todos"
          :key="index"
          :class="{ completed: item.completed }">
        {{ item.text }}
        <i class="toggle-icon" @click="toggleCompleted(index)"></i>
      </li>
    </ul>

    <h2>已完成</h2>
    <ul>
      <li v-for="(item, index) in filteredTodos"
          :key="index"
          :class="{ completed: item.completed }">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      todos: [],
      completedItems: [],
    };
  },
  computed: {
    filteredTodos() {
      return this.todos.filter(item => !item.completed);
    }
  },
  methods: {
    addNewItem() {
      if (this.newItem.trim()) {
        this.todos.push({ text: this.newItem, completed: false });
        this.newItem = '';
      }
    },
    toggleCompleted(index) {
      this.todos[index].completed = !this.todos[index].completed;
      this.$emit('update:todos', this.todos); // 使用自定义事件通知父组件更新
    }
  },
};
</script>

在这个例子中，我们创建了两个列表：一个是`todos`数组用于存储所有任务，另一个是`filteredTodos`计算属性，用于过滤已完成的任务。当用户点击“添加”按钮或切换完成状态时，我们会触发`addNewItem`和`toggleCompleted`方法。

2. **输入框组件化及事件传递**:
如果你有一个单独的`TodoInput`组件，可以这样使用：

<TodoInput @addItem="addNewItem" />

然后在`TodoInput.vue`组件里：

<template>
  <input type="text" v-model="inputText" @keyup.enter="submitItem" />
  <!-- 其他输入框元素... -->
</template>

<script>
export default {
  props: {
    addItem: { // 接收来自父组件的方法
      type: Function,
    },
  },
  methods: {
    submitItem() {
      if (this.inputText.trim()) {
        this.addItem(this.inputText);
        this.inputText = '';
      }
    },
  },
};
</script>

3. **使用 Element Plus**:
为了使界面更美观，你可以引入Element Plus并替换基本的HTML元素。例如，使用`el-input`和`el-button`代替默认的文本输入和按钮：

<el-input v-model="newItem" placeholder="添加新任务..." @keyup.enter="addNewItem"></el-input>
<el-button @click="addNewItem">添加</el-button>

同时，使用`el-checkbox-group`来替代自定义的完成状态开关：

<template>
  <el-checkbox-group v-model="selectedItems" @change="toggleCheckedItems">
    <el-checkbox v-for="(item, index) in todos" :label="index" :key="index">{{ item.text }}</el-checkbox>
  </el-checkbox-group>
</template>

记得先安装Element Plus库，并导入相关的样式和组件。