Why the checkbox doesn't work in this reactive inner object?

Describe the bug

Why is the checkbox not working here?

I think Svelte is re-evaluating innerTeam on change, but I don’t understand why: I’m changing innerTeam not team.

I’m using that reactive syntax to change innterTeam only if team changes! Not the other way!

Reproduction

REPL: https://svelte.dev/repl/1ef7657adbc545a0b595e2ab58069b4a?version=3.42.4

• App.svelte:

<script>
	import {onMount} from "svelte";
	
	import Inner from "./Inner.svelte"
	
	let team = {
		player: {id: "1", name: "John"},
		full: false
	}
	
	$: console.log("team changed:", team);
	
	onMount(() => {
		setTimeout(()=> {
			team = {
				player: {id: "2", name: "Bob"}, full: false
			}
		}, 4000)
	})
</script>

team: <pre>{JSON.stringify(team, null, 2)}</pre>

<Inner {team}></Inner>

• Inner.svelte:

<script>		
	export let team = undefined;
	
	let innerTeam;
	
	$: innerTeam = {
		...team,
		cars: []
	}
	
	$: console.log("innerTeam changed:", innerTeam);
	
	function addCar() {
		innerTeam.cars = [...innerTeam.cars, {id: "1", brand: "BMW"}]
	}
</script>

<button on:click={addCar}>
	Add car to customTeam
</button>

<br>

<input bind:checked={innerTeam.full} type="checkbox"/> Full?

<br>

innerTeam: <pre>{JSON.stringify(innerTeam, null, 2)}</pre>

Additional

Here a version without Inner.svelte component: https://svelte.dev/repl/6dd87a76d59548559b75f50103980e7a?version=3.42.4.

It’s the same. But if I remove the onMount() it works!

System Info

version=3.42.4

Severity

blocking all usage of svelte

[Prinzhorn]

One more thing that might help: you don’t need let innerTeam; at all, $: innerTeam = ... is enough (Svelte will handle defining the actual variable for you). Maybe this helps. Because you don’t declare an innerTeam variable and then make it reactive. You declare a reactive variable and it’s dependencies (“recipe”). See doubled here https://svelte.dev/tutorial/reactive-declarations

[Prinzhorn]

To me personally this behavior makes sense, we both seem to have a different mental model of what the given reactive statement does. And I don’t see it change before a new major version. I personally think what you’re doing is not “correct” (but it’s just an example, not your actual code). What if you add a team.title property in the top level and bind it to a input[type=text]. Now every time you change the title your checkbox is unchecked, because innerTeam is re-created. I’d be more specific about what I want to happen.

But I think we can agree that this is a duplicate?

Edit: my mental model for this example is “here’s my recipe on how to create a innerTeam object, Svelte please make sure it’s always up to date”. And the recipe is complete, nothing else can change the thing.