vue 3 v-model bug

by zpczjl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-rc.4/vue.global.js"></script>

<div id="app">
  <h1>to do list</h1>
  <input v-model='data.newTask' />  <button @click='createTask'>create task</button>

  <div v-for='item in data.unFinishTask' :key='item.name' class='item'>
    <input type='checkbox' v-model='item.done'/>
    {{ item.name }} - {{ item.done }}
  </div>

  <div>-----------------------</div>

  <div v-for='item in data.finishTask' :key='item.name' class='item'>
    <input type='checkbox' v-model='item.done' />
    {{ item.name }} - {{ item.done }}
  </div>

</div>

JavaScript

const { createApp, reactive, computed } = Vue;
  const app = createApp({
    setup() {
      let data = reactive({
        items: [],
        newTask: '',
        unFinishTask: computed(_ => data.items.filter(item => !item.done)),
        finishTask: computed(_ => data.items.filter(item => item.done)),
      })

      function createTask() {
        data.items.push({
          name: data.newTask,
          done: false,
        })
        data.newTask = ''
      }

      return { data, createTask }
    }
  })

  app.mount('#app')