Is this `binding_property_non_reactive` really correct?

[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"?

Reproduction

https://svelte.dev/playground/2c859a9c620b4b9a8422c2596df4c209?version=5.42.3

I need to use let {data: player} = $derived(playerStore) because the queryFn can be async and can take some time to load or to refetch itself with new data.

UPDATE:

This works:

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

    let player = $derived.by(() => {
        const res = $state(data);
        return res;
    });
</script>

But really this ugly?

[Ocean-OS]

The binding error is correct since $deriveds are not proxied, so they are not deeply reactive. When you return a $state proxy from a $derived, however, it is deeply reactive.

[frederikhors]

Can I ask you the idiomatic way of doing this?

[Ocean-OS]

Returning a $state proxy is probably the best way to do this. For more info, I'd recommend reading through #16189.