Kanban Board

A Kanban board depends on stable identity. Every task can move between columns, change position inside the same column, be edited, deleted, filtered, persisted, and restored after reload. A common mistake is using array indexes as task IDs or Vue :key values. This works only while the list never changes. As soon as a user drags a card, removes a task, or filters the board, indexes shift and Vue may reuse the wrong DOM node.

This bug is especially frustrating in drag-and-drop interfaces because the UI can look correct for a moment and then display duplicated cards, stale card content, or wrong edit modal data. The problem is not Vue itself; the problem is that the data model does not give Vue a reliable way to identify each task.

A real Kanban board should use stable IDs for both columns and tasks. The column ID should not depend on the column title, because users may rename columns later. The task ID should not depend on the task position, because task position changes constantly. Generate IDs when the item is created and keep those IDs unchanged for the lifetime of the item.

Problematic approach:

          <template>
            <div class="kanban-column">
              <TaskCard
                v-for="(task, index) in column.tasks"
                :key="index"
                :task="task"
                @edit="openTaskEditor(index)"
              />
            </div>
          </template>

This makes the task identity depend on its current position. If the task moves from index 0 to index 3, Vue sees a different key and the edit logic may point to the wrong task.

Better data model:

          type TaskPriority = "low" | "medium" | "high";

          type KanbanTask = {
            id: string;
            columnId: string;
            title: string;
            description: string;
            priority: TaskPriority;
            createdAt: string;
            dueDate?: string;
          };

          type KanbanColumn = {
            id: string;
            title: string;
            taskIds: string[];
          };

          type KanbanBoard = {
            columns: KanbanColumn[];
            tasks: Record<string, KanbanTask>;
          };

Stable Vue rendering:

          <template>
            <section class="kanban-column">
              <TaskCard
                v-for="taskId in column.taskIds"
                :key="taskId"
                :task="tasks[taskId]"
                @edit="openTaskEditor(taskId)"
              />
            </section>
          </template>

Creating a task with a stable ID:

          function createTask(input: {
            columnId: string;
            title: string;
            description: string;
            priority: TaskPriority;
            dueDate?: string;
          }): KanbanTask {
            return {
              id: crypto.randomUUID(),
              columnId: input.columnId,
              title: input.title,
              description: input.description,
              priority: input.priority,
              dueDate: input.dueDate,
              createdAt: new Date().toISOString()
            };
          }

Pay attention to: Never use array indexes as task identity in a Kanban board. Stable IDs make drag-and-drop, editing, persistence, filtering, and Vue rendering much safer.

Drag-and-drop creates many intermediate events. The user starts dragging, enters a column, hovers over another card, moves away, comes back, and finally drops the task. A common mistake is updating the permanent board state during every hover event. This can create flickering, duplicated tasks, incorrect ordering, and very noisy localStorage writes.

A better design separates temporary drag state from permanent board state. Temporary drag state describes what the user is currently doing: active task ID, source column, source index, target column, and target index. The board data should be updated only when the drop is confirmed. This makes the drag behavior easier to debug because one controlled function is responsible for the final move.

This separation also improves visual feedback. You can highlight a target column, show a placeholder, or change the opacity of the active card without changing the saved board. If the user cancels the drag or drops outside a valid area, the board stays unchanged.

Problematic approach:

          function onDragEnter(targetColumnId: string, taskId: string) {
            const sourceColumn = board.columns.find((column) => {
              return column.taskIds.includes(taskId);
            });

            const targetColumn = board.columns.find((column) => {
              return column.id === targetColumnId;
            });

            sourceColumn.taskIds = sourceColumn.taskIds.filter((id) => id !== taskId);
            targetColumn.taskIds.push(taskId);
          }

This changes the real board before the user drops the card. If the user only hovers over a column and then leaves, the task may already have moved.

Better temporary drag state:

          type DragState = {
            activeTaskId: string | null;
            sourceColumnId: string | null;
            sourceIndex: number | null;
            targetColumnId: string | null;
            targetIndex: number | null;
          };

          const dragState = reactive<DragState>({
            activeTaskId: null,
            sourceColumnId: null,
            sourceIndex: null,
            targetColumnId: null,
            targetIndex: null
          });

          function startDraggingTask(params: {
            taskId: string;
            columnId: string;
            index: number;
          }) {
            dragState.activeTaskId = params.taskId;
            dragState.sourceColumnId = params.columnId;
            dragState.sourceIndex = params.index;
            dragState.targetColumnId = params.columnId;
            dragState.targetIndex = params.index;
          }

Commit the move only on drop:

          function finishDraggingTask() {
            if (
              !dragState.activeTaskId ||
              !dragState.sourceColumnId ||
              !dragState.targetColumnId ||
              dragState.sourceIndex === null ||
              dragState.targetIndex === null
            ) {
              resetDragState();
              return;
            }

            moveTask({
              taskId: dragState.activeTaskId,
              sourceColumnId: dragState.sourceColumnId,
              targetColumnId: dragState.targetColumnId,
              targetIndex: dragState.targetIndex
            });

            resetDragState();
          }

          function resetDragState() {
            dragState.activeTaskId = null;
            dragState.sourceColumnId = null;
            dragState.sourceIndex = null;
            dragState.targetColumnId = null;
            dragState.targetIndex = null;
          }

Pay attention to: Drag hover is not the same as a confirmed board update. Keep visual drag state separate and update the board only after a valid drop.

The most important Kanban action is moving a task. It sounds simple, but the logic has several edge cases. The source column must remove the task. The target column must receive the task at the correct position. The task itself may need a new columnId. If the task moves inside the same column, the reorder logic must avoid deleting or duplicating the task. If the target column is empty, the task should still drop correctly.

Beginners often write separate code paths for “move to another column” and “reorder inside column,” but forget one of the edge cases. The result is a board that works for a few moves but breaks after repeated dragging. A more reliable approach is to write one controlled function that receives source and target information and returns a new board state.

Problematic approach:

          function moveTaskToColumn(taskId: string, targetColumnId: string) {
            const targetColumn = board.columns.find((column) => {
              return column.id === targetColumnId;
            });

            targetColumn.taskIds.push(taskId);
          }

This only adds the task to the target column. It does not remove the task from the source column, so the same card can appear in two places.

Better move function:

          type MoveTaskInput = {
            taskId: string;
            sourceColumnId: string;
            targetColumnId: string;
            targetIndex: number;
          };

          function moveTask(input: MoveTaskInput) {
            const sourceColumn = board.columns.find((column) => {
              return column.id === input.sourceColumnId;
            });

            const targetColumn = board.columns.find((column) => {
              return column.id === input.targetColumnId;
            });

            if (!sourceColumn || !targetColumn) {
              return;
            }

            sourceColumn.taskIds = sourceColumn.taskIds.filter((taskId) => {
              return taskId !== input.taskId;
            });

            const safeTargetIndex = Math.min(
              Math.max(input.targetIndex, 0),
              targetColumn.taskIds.length
            );

            targetColumn.taskIds.splice(safeTargetIndex, 0, input.taskId);

            board.tasks[input.taskId] = {
              ...board.tasks[input.taskId],
              columnId: input.targetColumnId
            };
          }

Same-column reorder helper:

          function reorderTaskInColumn(params: {
            columnId: string;
            fromIndex: number;
            toIndex: number;
          }) {
            const column = board.columns.find((item) => {
              return item.id === params.columnId;
            });

            if (!column) {
              return;
            }

            const nextTaskIds = [...column.taskIds];
            const [movedTaskId] = nextTaskIds.splice(params.fromIndex, 1);

            nextTaskIds.splice(params.toIndex, 0, movedTaskId);

            column.taskIds = nextTaskIds;
          }

Pay attention to: Every task move should update the source column, target column, and task relationship consistently. Always test same-column reorder, cross-column movement, empty-column drops, first-position drops, and last-position drops.

LocalStorage makes a Kanban project feel realistic because the board does not reset after refresh. But persistence can also introduce bugs. A common mistake is saving the whole board on every tiny drag event or loading saved JSON without checking whether it matches the current data structure. If the saved data is corrupted or belongs to an older version of the app, the board may crash on startup.

Persistence should happen after meaningful changes: task creation, task edit, task deletion, confirmed drag drop, column creation, column rename, and column deletion. It should not happen during every hover state. Loading should include validation and a fallback empty board. This protects the app from broken JSON and makes the board more reliable during development.

Problematic approach:

          watch(
            board,
            () => {
              localStorage.setItem("kanban-board", JSON.stringify(board));
            },
            {
              deep: true
            }
          );

          const savedBoard = JSON.parse(localStorage.getItem("kanban-board"));
          board.columns = savedBoard.columns;
          board.tasks = savedBoard.tasks;

This deep watcher can write too often, especially during drag interactions. The loading logic also assumes saved data is always valid.

Better validation helpers:

          function isKanbanColumn(value: unknown): value is KanbanColumn {
            if (!value || typeof value !== "object") {
              return false;
            }

            const column = value as Record<string, unknown>;

            return (
              typeof column.id === "string" &&
              typeof column.title === "string" &&
              Array.isArray(column.taskIds)
            );
          }

          function isKanbanBoard(value: unknown): value is KanbanBoard {
            if (!value || typeof value !== "object") {
              return false;
            }

            const boardValue = value as Record<string, unknown>;

            return (
              Array.isArray(boardValue.columns) &&
              boardValue.columns.every(isKanbanColumn) &&
              typeof boardValue.tasks === "object" &&
              boardValue.tasks !== null
            );
          }

Safe loading:

          function loadBoardFromStorage(): KanbanBoard {
            try {
              const savedBoard = localStorage.getItem("kanban-board");

              if (!savedBoard) {
                return createDefaultBoard();
              }

              const parsed: unknown = JSON.parse(savedBoard);

              if (!isKanbanBoard(parsed)) {
                return createDefaultBoard();
              }

              return parsed;
            } catch {
              return createDefaultBoard();
            }
          }

Save only after committed changes:

          function saveBoard() {
            localStorage.setItem("kanban-board", JSON.stringify(toRaw(board)));
          }

          function handleDrop() {
            finishDraggingTask();
            saveBoard();
          }

          function handleCreateTask(input: CreateTaskInput) {
            createTaskInColumn(input);
            saveBoard();
          }

Pay attention to: Persist confirmed board changes, not temporary drag hover state. Validate stored data before using it and always provide a safe default board.

Search and filtering are useful in a Kanban board because real boards can contain many tasks. A common mistake is filtering by directly removing tasks from column arrays. This seems to work visually, but it destroys the actual board structure. When the search query is cleared, the original order may be lost or tasks may disappear completely.

Filtering should be derived state, not saved state. The real board should keep all tasks and their original column relationships. The UI can compute visible task IDs based on a search query, priority filter, assignee filter, or overdue filter. This approach keeps the board safe because filters only affect rendering, not the underlying data.

Problematic approach:

          function applySearch(query: string) {
            board.columns.forEach((column) => {
              column.taskIds = column.taskIds.filter((taskId) => {
                const task = board.tasks[taskId];

                return task.title.toLowerCase().includes(query.toLowerCase());
              });
            });
          }

This permanently removes task IDs from columns. Clearing the search cannot reliably restore the original board.

Better filter state:

          const searchQuery = ref("");
          const selectedPriority = ref<"all" | TaskPriority>("all");

          function matchesTaskFilters(task: KanbanTask): boolean {
            const normalizedQuery = searchQuery.value.trim().toLowerCase();

            const matchesSearch =
              !normalizedQuery ||
              task.title.toLowerCase().includes(normalizedQuery) ||
              task.description.toLowerCase().includes(normalizedQuery);

            const matchesPriority =
              selectedPriority.value === "all" ||
              task.priority === selectedPriority.value;

            return matchesSearch && matchesPriority;
          }

Computed visible columns:

          const visibleColumns = computed(() => {
            return board.columns.map((column) => {
              return {
                ...column,
                taskIds: column.taskIds.filter((taskId) => {
                  const task = board.tasks[taskId];

                  return task ? matchesTaskFilters(task) : false;
                })
              };
            });
          });

Template rendering:

          <KanbanColumn
            v-for="column in visibleColumns"
            :key="column.id"
            :column="column"
            :tasks="board.tasks"
          />

Pay attention to: Search and filters should not rewrite the board. Use computed values for visible tasks and keep the saved board structure unchanged.

Drag-and-drop interfaces often look impressive in a desktop demo, but they can fail for touch users, keyboard users, and users with accessibility needs. A common mistake is building the entire interaction around mouse events and assuming every user can drag precisely. Real boards should provide clear visual feedback, large enough drag handles, and alternative actions for moving tasks.

Even if the first implementation uses the browser Drag and Drop API, you should think about interaction quality. The active card should be visually distinct. Drop zones should highlight when they can accept a task. The board should be usable on smaller screens with horizontal scrolling. For accessibility, provide menu actions such as “Move to In Progress” or “Move to Done,” so a task can be moved without drag gestures.

Problematic approach:

          <article
            class="task-card"
            draggable="true"
            @dragstart="onDragStart(task.id)"
          >
            {{ task.title }}
          </article>

This gives only one interaction path: drag the entire card. It does not provide a keyboard-friendly movement alternative or a clear drag handle.

Better card structure:

          <article
            class="task-card"
            :class="{ 'task-card--dragging': dragState.activeTaskId === task.id }"
          >
            <button
              class="task-card__drag-handle"
              type="button"
              draggable="true"
              @dragstart="startDraggingTask({
                taskId: task.id,
                columnId: task.columnId,
                index: taskIndex
              })"
              aria-label="Drag task"
            >
              ⋮⋮
            </button>

            <div class="task-card__content">
              <h3>{{ task.title }}</h3>
              <p>{{ task.description }}</p>
            </div>

            <TaskMoveMenu
              :task="task"
              :columns="columns"
              @move="moveTaskByMenu"
            />
          </article>

Alternative move action:

          function moveTaskByMenu(params: {
            taskId: string;
            targetColumnId: string;
          }) {
            const targetColumn = board.columns.find((column) => {
              return column.id === params.targetColumnId;
            });

            if (!targetColumn) {
              return;
            }

            moveTask({
              taskId: params.taskId,
              sourceColumnId: board.tasks[params.taskId].columnId,
              targetColumnId: params.targetColumnId,
              targetIndex: targetColumn.taskIds.length
            });

            saveBoard();
          }

Useful visual feedback:

          .task-card--dragging {
            opacity: 0.55;
            transform: rotate(1deg);
          }

          .kanban-column--drop-target {
            outline: 2px dashed #6366f1;
            outline-offset: 4px;
          }

          .task-card__drag-handle {
            cursor: grab;
            min-width: 36px;
            min-height: 36px;
          }

Pay attention to: Drag-and-drop should not be the only way to move tasks. Add clear visual feedback, touch-friendly controls, and non-drag alternatives for better usability.