Todo List (Refs + List Rendering)

easy

By FrontendAtlas Team · Updated Jan 30, 2026

easy level

Vue 3 Composition API with refs and computed List rendering with v-for and keys Immutable style array updates (map/filter) for clarity Basic component-level state management

Build a small Todo List in Vue 3 using the Composition API and <script setup>. Users should be able to add tasks, mark them as completed, remove individual tasks, and clear all completed tasks. Framework focus: Vue SFC patterns, ref/reactive state, computed/watch, and v-model bindings.

Vue 3 Composition API with refs and computed List rendering with v-for and keys Immutable style array updates (map/filter) for clarity Basic component-level state management

Requirements

Render a Todo List as the main UI in App.vue.
Use a text input and 'Add' button to create new todos.
Display todos in a list using v-for.
Each todo should have a checkbox to toggle completion and a 'Remove' button.
Provide a 'Clear completed' button that removes all completed todos when clicked.

Expected behavior

Clicking 'Add' with non-empty trimmed text adds a new todo to the list and clears the input.
Checking a todo's checkbox toggles its completed state and visually marks it (line-through).
Clicking 'Remove' deletes that specific todo.
Clicking 'Clear completed' removes all todos where done === true.
An empty state message is shown when there are no todos.

Implementation notes

Use `ref('')` for the controlled input value (newTask).
Store the list of todos in a `ref<Todo[]>([])` where each todo has `id`, `text`, and `done`.
Use `computed` for simple derived state like `hasTodos`.
Implement helpers `addTask`, `toggleTask`, `removeTask`, and `clearCompleted` inside `<script setup>`.
Keep everything in a single App.vue component.

Solution

Overview

Use a single Vue 3 SFC with <script setup> to manage the todo list. Track the input value in newTask and store todos in a ref array with { id, text, done }. A computed property hasTodos drives the empty state and footer visibility. Actions (addTask, toggleTask, removeTask, clearCompleted) update the todos array, and the template uses v-for to render items plus a checkbox and Remove button.

**Key ideas**

Keep all state in refs inside <script setup>.
Use v-for + :key for list rendering.
Use immutable updates (map / filter) for clear toggling and removal.
Drive simple UI states (empty vs list, footer visibility) from computed values.

Single component with ref-backed list and immutable updates

Define type Todo = { id: number; text: string; done: boolean } and create const newTask = ref('') plus const todos = ref([] as Todo[]). addTask trims newTask.value, bails on empty, and appends a new todo with a unique id (e.g. Date.now()). toggleTask(id) replaces the array with todos.value.map(todo => todo.id === id ? { ...todo, done: !todo.done } : todo). removeTask(id) and clearCompleted() use filter to drop items. A hasTodos computed returns todos.value.length > 0 and controls whether you show the empty message or the list.

Notes & Pitfalls

Pitfalls

Mutating todos in place without updating the ref value in a way that keeps the code clear.
Adding empty or whitespace-only tasks by forgetting to trim the input.
Forgetting to use `:key` in `v-for`, which can lead to odd checkbox behaviour.
Toggling completion without visually reflecting it (missing the `done` class binding).

Techniques

Using refs for both scalar and array state.
Using computed for derived flags such as `hasTodos`.
Updating arrays immutably to keep logic simple and predictable.
Binding classes dynamically with `:class` for completed todos.

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse Vue.js interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 30-day foundations study plan Open Company Prep Open Vue Framework Prep Guide

Files

Select a file

Starter preview loads when the editor is ready. Use Rebuild preview after editing.