todo_comp template part

todo_comp.vue

<template>
  <div id="todos-vue">
    <div>
      <label>New task:</label>
      <!-- use v-model for 2-way binding, call method when user press enter @keyup.enter-->
      <input id="new_todo" v-model="new_todo" placeholder="edit me" @keyup.enter="add_todo()">
      <button @click="add_todo()">Add</button>
    </div>
    <div>
      <div v-for="(todo, index) in todos" :key="todo.id">
        <label>{{index}}.</label>
        <!-- we also want to be able to directly update the existing todo, this is handled by v-model, but our database needs to be handled differently-->
        <input v-model="todo.content" :disabled="todo.done" @keyup.enter="update_todo(todo)">
        <!-- when click the checkbox, the input becomes disabled -->
        <input type="checkbox" v-model="todo.done">
        <button @click="remove_todo(index)">Delete</button>
      </div>
    </div>
  </div>
</template>