bind:value on reactive variable

[cenuij]

I have the following page in SvelteKit

<script>
	export let data;

	$: ({x} = data);
</script>

<input type="number" bind:value={x}>
<input type="number" value={x} on:change={e => x = +e.currentTarget.value}>

where the first <input> element does not work (as I expected it to), while the second works fine. It seems that Svelte generates the follow code for the input change handler on the first <input> element:

function input0_input_handler() {
	x = to_number(this.value);
	($$invalidate(0, x), $$invalidate(1, data));
}

Why does it invalidate data? It doesn't for the second <input> element?

Not a lot of code, but available at https://www.sveltelab.dev/c7f9ul5tqurio3r?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

I'd really like to understand, if someone can help me out ... thanks.