index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-ToDo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>

	<div id="app">

		<input type="text" v-model="newTask">
		<button @click="addTask">Add task</button>

		<div>
			<ul v-for="task in tasks" v-if="task.show">
				<li v-text="task.description" :class="{ completed: task.completed }"></li>
				<button v-show="!task.completed" @click="markCompleted(task)">Mark as completed</button>
			</ul>
		</div>

		<button @click="filterOpen">Only show open Tasks</button>
		<button @click="filterCompleted">Only show completed Tasks</button>
		<button @click="showAllTasks">Show All Tasks</button>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="main.js"></script>
</body>
</html>