Svelte, only re-render an item in list, not the entire list

Question

Both with svelte-apollo (https://github.com/timhall/svelte-apollo/issues/19) and @urql-svelte (https://github.com/FormidableLabs/urql/issues/704) I'm having an entire list re-render instead of just an element re-render.

Reproduction steps:

• go to REPL: https://codesandbox.io/s/urql-svelte-list-rerendering-uwsvn

• click a button

• every button re-render; so the entire list re-render itself

• I expect it re-renders only the button I clicked

If I read here: https://svelte.dev/tutorial/svelte-options, I understand that by using:

immutable={true} — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed

immutable={false} — the default. Svelte will be more conservative about whether or not mutable objects have changed

If you see the example they are changing the todos array as we are also doing with urql:

let todos = [
  { id: 1, done: true, text: 'wash the car' },
  { id: 2, done: false, text: 'take the dog for a walk' },
  { id: 3, done: false, text: 'mow the lawn' }
];

function toggle(toggled) {
  todos = todos.map(todo => {
    if (todo === toggled) {
      // return a new object
      return {
        id: todo.id,
        text: todo.text,
        done: !todo.done
      };
    }

    // return the same object
    return todo;
  });
}

Why it doesn't work with my REPL todos example?

Is todos a new array at the end?