error Unexpected mutation of "todo" prop in vue.js (I'm using vue3)

Question

I'm making a todo app in vue.js which has a component TodoItem

<template>
  <div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
    <p>
      <input type="checkbox" @change="markCompleted" />
      {{todo.task}}
      <button class="del">x</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: ["todo"],
  methods: {
    markCompleted() {
      this.todo.completed = true
    },
  },
};
</script>

todo prop that I'm passing:

{
  id:1,
  task:'todo 1',
  completed:false
}

but it is throwing an error error Unexpected mutation of "todo" prop

Answer 1

Method 1 (Vue 2.3.0+) - From your parent component, you can pass prop with sync modifier

Parent Component

<TodoItem v-for="todo in todoList" :key="todo.id" todo_prop.sync="todo">

Child Component

    <template>
      <div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
        <p>
          <input type="checkbox" @change="markCompleted" />
          {{todo.task}}
          <button class="del">x</button>
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: "TodoItem",
      props: ["todo_prop"],
      data() {
         return {
            todo: this.todo_prop
         }
      },
      methods: {
        markCompleted() {
          this.todo.completed = true
        },
      },
    };
    </script>

Method 2 - Pass props from parent component without sync modifier and emit an event when the value changed. For this method, everything else is similar as well. Just need to emit an event when the todo item changed to completed.

The code is untested. Apologies if anything does not work.