TODO component in Vue.js

todo.vue

<template>
  <table>
    <tr v-for="(todo, idx) in todos" :key="idx">
      <td class="todo_text">{{todo}}</td>
      <td>
        <button @click="removeItem(idx)">Done</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" placeholder="TODO item" v-model="todoText" />
      </td>
      <td>
        <button @click="addItem">Add</button>
      </td>
    </tr>
  </table>
</template>
<script>
module.exports = {
  data() {
    return {
      todoText: "",
      todos: []
    };
  },
  methods: {
    addItem() {
      this.todos.push(this.todoText);
      this.todoText = "";
    },
    removeItem(idx) {
      this.todos.splice(idx, 1);
    }
  }
};
</script>
<style>
.todo_text {
  font-style: italic;
}
</style>