Estoy tratando de agregar un botón que cambia de color cuando se hace clic y cambia entre verdadero y falso. ¿Qué estoy haciendo mal? He intentado cambiar 'checkCompleted' a 'checkCompleted(task)' pero sigue dando el mismo error

(texto adicional para que stackoverflow me permita publicar la pregunta, siguen diciendo demasiado código y no hay suficiente texto)

 <template> <div class="container tasks"> <div class="card" v-for="(task, index) in tasks" :key="index"> <div class="card-content"> <div class="card-title"> <h4>{{ task.title }}</h4> </div> <p>{{ task.description }}</p> <button class="btn-small green" @click="checkCompleted" v-if="!isCompleted" > Completed </button> <div class="btn- red" v-else>Incomplete</div> </div> </div> </div> </template> <script> export default { name: "Home", data() { return { tasks: [ { title: "Read Books", description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.", isCompleted: false, }, { title: "Wash Plates", description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.", isCompleted: false, }, { title: "Play Fifa", description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.", isCompleted: false, }, { title: "Go Gym", description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.", isCompleted: false, }, ], }; }, methods: { checkCompleted() { this.isCompleted = this.isCompleted ? true : false; }, }, }; </script>