Vue Js Dynamic Class Binding Not Updating

I’ve been learning Vue Js with the customary todo app.

I’m binding a class to my todo objects based on the truthy value of todo.completed as below:

    <a v-bind:class="{iscomplete : todo.completed}">
    <input type="checkbox" v-on:change="markComplete" />

The iscomplete class simply adds a line through text decoration.

The checkbox calls the following method:

methods: {
    markComplete() {
      this.todo.completed = !this.todo.completed;
    }

The above works for any todo items already in the DOM but when new todos are added the dynamic class binding no longer works.

I’ve included a short gif below showing the issue.

I can’t seem to find any answers, perhaps my lack of experience with Vue is leading me to search for the incorrect terms. I do apologise if it has been asked before I can’t seem to get my head around it/find similar issues online.

Can anyone explain the theory behind why this might fail like this?

    prepareTodo: function () {
      const newTodo = {
        id: Math.random(2),
        description: this.todoDescription,
        complete: false,
      };

computed: {
    markComplete() {
      this.todo.completed = !this.todo.completed;
    }