Variable change doesn't render in the view - state

Question

The intention of the following code is to display a row if unique identifier of the row above is within the rows array. Why does Svelte update the view only after several clicks, in a seemingly random way?
<script>
import { onMount } from "svelte";
let rows = [
{"name": "Alex", "id": "0"},
{"name": "Steve", "id": "1"},
{"name": "Mike", "id": "2"},
];
let expandedRows = [];
function toggleExpandRows(row_id_to_toggle) {
console.log("Row to toggle:", row_id_to_toggle)
console.log(expandedRows);
if (expandedRows.includes(row_id_to_toggle)) {
console.log(expandedRows, "includes", row_id_to_toggle)
expandedRows = expandedRows.filter(expanded_row_id => expanded_row_id !== row_id_to_toggle)
} else {
expandedRows.push(row_id_to_toggle);
}
}
</script>
<div class="overflow-x-auto w-full">
<table class="table table-compact w-full">
<thead>
<tr>
<th></th>
<th>Name</th>
</tr>
</thead>
<tbody>
{#each rows as row (row.id)}
<tr>
<td>
<button class="btn btn-xs" on:click={()=>toggleExpandRows(row.id)}>+/-</button>
</td>
<td class="min-w-[3rem] ">{row.name}</td>
</tr>
row.id: {JSON.stringify(row.id)}
{#if expandedRows.includes(row.id)}
<tr>
<td colspan="2">-</td>
</tr>
{/if}
{/each}
</tbody>
</table>
Expanded: {JSON.stringify(expandedRows)}
</div>
REPL

Answer 1

Reactivity is based on assignments, which is why for arrays you also often see this pattern instead of push:
array = [...array, item];

Answer 2

Instead of just expandedRows.push(row_id_to_toggle), you should also assign expandedRows, so Svelte will know it has changed.
You can try:
.
.
.
else {
expandedRows.push(row_id_to_toggle);
expandedRows = expandedRows
}