setup语法糖实现todo

<template>
  <div class="todo">
    <!-- 计算功能 -->
    <input type="text" v-model="wantName" />
    <button @click="addThing">aaaa</button>
    <div v-for="(item,index) in dataList" v-bind:key="item.id" style="background-color: white">
      <button @click="ifAgree(index)">{{ item.flag ? "通过" : "未通过" }}</button>
      <span style="margin: 0 30px">{{ item.name||'无' }}</span>
      <button @click="delet(index)">删除</button>
    </div>
    <span>还有{{num}}条未通过</span>
  </div>
</template>
<script setup>
import { computed, reactive, ref } from "vue";
const wantName = ref(null);
const dataList = reactive([{ name: null, id: 0, flag: false }]);
const addThing = () => {
  dataList.push({ name: wantName.value, id: new Date(), flag: false });
  console.log(dataList);
};
const ifAgree = index => {
  dataList[index].flag = !dataList[index].flag
};
const delet = index => {
  dataList.splice(index,1);
};
const num = computed(()=>{
  return  dataList.filter(item=>!item.flag).length
})
</script>

过于简陋