<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id" :class="{ 'task-overdue': isOverdue(task), 'task-completed': task.completed }">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Task 1', dueDate: '2023-06-01', completed: false },
        { id: 2, name: 'Task 2', dueDate: '2023-05-30', completed: true },
        { id: 3, name: 'Task 3', dueDate: '2023-06-02', completed: false }
      ]
    };
  },
  methods: {
    isOverdue(task) {
      const dueDate = new Date(task.dueDate);
      const today = new Date();
      return dueDate < today;
    }
  }
};
</script>

<style scoped>
.task-overdue {
  color: red;
  font-weight: bold;
}

.task-completed {
  text-decoration: line-through;
}
</style>