Angular Signal not Recomputing

In the Angular (v18) code below, a static list of 3 allTasks is filtered by user id when the component renders and displays (for userId u3) 2 tasks via the computed tasks property.

There is an event which calls onCompleteTask() which successfully removes the task from allTasks. The length of allTasks is logged as being reduced from 3 to 2. We expect the tasks() property to now return 1 instead of 2 filtered tasks.

However, the component does not re-render – the computed tasks function is never called even though allTasks has been updated – indeed with a new reference.

Why is tasks not updated when allTasks changes?

import { Component, input, computed } from '@angular/core';
//import { NgIf } from '@angular/common';

import { TaskComponent } from './task/task.component';

import { Task } from './task.model';

@Component({
  selector: 'app-task-list',
  standalone: true,
  templateUrl: './tasks.component.html',
  imports: [TaskComponent],
  styleUrls: ['./tasks.component.css'],
})
export class TaskListComponent {
  userId = input<string>();
  userName = input<string>();
  allTasks: Task[] = [
    {
      id: 't1',
      userId: 'u1',
      title: 'Master Angular',
      summary: 'Learn all the basic and advanced features of Angular & how to apply them.',
      dueDate: '2025-12-31',
    },
    {
      id: 't2',
      userId: 'u3',
      title: 'Build first prototype',
      summary: 'Build a first prototype of the online shop website',
      dueDate: '2024-05-31',
    },
    {
      id: 't3',
      userId: 'u3',
      title: 'Prepare issue template',
      summary: 'Prepare and describe an issue template which will help with project management',
      dueDate: '2024-06-15',
    },
  ];
  tasks = computed<Task[]>(() => {
    console.log('Computing tasks for user', this.userId());
    return this.allTasks.filter((task) => task.userId === this.userId());
  });

  constructor() {}

  onCompleteTask(id: string) {
    let newTasks = this.allTasks.filter((task) => task.id !== id);
    this.allTasks = newTasks;
    console.log('Completed task', id, this.allTasks.length);
  }
}