Vue JS - How to do conditional display of text based on click event

Question

I just started learning Vue because I want to move from PHP to Javascript.

I have a question that I can't solved and I hope you can help me with it.

I have a list of tasks. I want to update the status if I completed the task. If I click, the set as complete link, the task would move from the incomplete tasks to the list of completed tasks.

You can see on the screenshot, the Buy milk is in the completed tasks. What I am trying to do is to add a "completed" text or a check icon beside "Buy milk" on the All Task list.

Here is my code:

< script >
  var app = new Vue({
    el: '#root',
    data: {
      message: 'Hello world!',
      tasks: [{
          description: 'Go to the store',
          completed: false
        },
        {
          description: 'Buy milk',
          completed: false
        },
        {
          description: 'Feed the dog',
          completed: false
        },
        {
          description: 'Cook something',
          completed: false
        }
      ]
    },
    methods: {
      setToCompleted() {
        this.completed = true;
      },

    },
    computed: {
      incompleteTasks() {
        return this.tasks.filter(task => !task.completed);
      },
      completedTasks() {
        return this.tasks.filter(task => task.completed);
      }

    }
  }); <
/script>

<div id="root">
  <h3>All tasks</h3>
  <ul>
    <li v-for="task in tasks" v-text="task.description == true ? 'Completed' : 'Not completed'"></li>
  </ul>

  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}&nbsp|&nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

What I have tried Is I added a condition on a v-text directive. But it always show not completed. May you guide me why it is not changing? I would appreciate your help.

Thankyou.

EDIT======

This code solves my problem: thanks @tomrlh

<div id="root">
  <h3>All tasks</h3>
  <li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? 'completed' : '' }}
  </li>
  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}&nbsp|&nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

Answer 1

what about to check if the task is completed in your All Tasks exhibition, then showing conditionally the 'completed' message:

<h3>All tasks</h3>
<li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? ' | completed' }}
</li>