[svelte] Why can't I bind to a `createQuery` result?

[frederikhors]

Describe the bug

Using Svelte (v5.42.3) and Svelte Kit (v2.48.2) and @tanstack/svelte-query (v6.0.3).

If I have the component Player.svelte:

<script lang="ts">
    import { createQuery } from '@tanstack/svelte-query';

    const playerStore = createQuery(() => ({
        queryKey: "key",
        queryFn: playerById(page.params.player_id),
    }));

    let { data: player } = $derived(playerStore);
</script>

<FormPlayers bind:player={player} />

and FormPlayers.svelte:

<script lang="ts">
    type Props = {
        player: Player;
    };

    let {
        player = $bindable(),
    }: Props = $props();
</script>

{#each player.skills as skill, index (skill.id)}
    <FormPlayerSkill bind:skill={player.skills[index]} />
{/each}

and FormPlayerSkill.svelte:

<script lang="ts">
    type Props = {
        skill: PlayerSkillInput;
    };

    let {
        skill = $bindable()
    }: Props = $props();
</script>

<Date bind:date={skill.date} />

I get the error:

FormPlayers.svelte:77 [svelte] binding_property_non_reactive
`bind:skill={player.skills[index]}` (src/routes/players/FormPlayers.svelte:40:4) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive

Why? Isn't the let { data: player } = $derived(playerStore) assignable / bindable / editable / "Sveltable"?

Your minimal, reproducible example

I'll post ASAP (it's not easy).

Tanstack Query adapter

svelte-query

TanStack Query version

6.0.3

TypeScript version

5.9.3

[TkDodo]

@lachlancollins please have a look 🙏