This is the code I’m using. Its also in sevelte5 playground here.
What I don’t understand is, why it’s not logging when I add todo with array.push but works when I do reassignment. Not going to use it but just learning.

<script>
    let todos = $state([{
        text: "Todo 1",
        status: "pending"
    }]);

    $effect(() => {
        console.log(todos)
        // const countEl = document.getElementById("count");
        // countEl.innerHTML = todos.length
    });

    function pushTodo(event) {
        if (event.key != 'Enter')return
        const elem = event.target
        todos.push({text: elem.value, status: "pending"})
        elem.value = ""
    }
    function spreadTodo(event) {
        if (event.key != 'Enter')return
        const elem = event.target
        todos = [...todos, {text: elem.value, status: "pending"}]
        elem.value = ""
    }
    
</script>

<div class="todos">
    <input onkeyup={pushTodo} placeholder="Push Todo">
    <input onkeyup={spreadTodo} placeholder="Spread Todo">
    <ul>
    {#each todos as todo}
        <li>
            {todo.text}: {todo.status}
        </li>
    {/each}
    </ul>
    <p>Total: <span  id="count"></span></p>
    
</div>