fix: handle component binding mutation

#10359 (comment)

Author: dummdidumm

.changeset/witty-readers-provide.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: handle component binding mutation

packages/svelte/src/internal/client/reactivity/props.js

@@ -175,10 +175,13 @@ export function prop(props, key, flags, initial) {
 	// intermediate mode — prop is written to, but the parent component had
 	// `bind:foo` which means we can just call `$$props.foo = value` directly
 	if (setter) {
-		return function (/** @type {V} */ value) {
+		return function (/** @type {V} */ value, mutation = false) {
 			if (arguments.length === 1) {
 				/** @type {Function} */ (setter)(value);
 				return value;
+			} else if (mutation) {
+				/** @type {Function} */ (setter)(getter());
+				return value;
 			} else {
 				return getter();
 			}

packages/svelte/tests/runtime-legacy/samples/component-binding-deep2/Widget.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value={value.name}>

packages/svelte/tests/runtime-legacy/samples/component-binding-deep2/_config.js

@@ -0,0 +1,32 @@
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<input>
+		<p>foo</p>
+	`,
+
+	ssrHtml: `
+		<input value=foo>
+		<p>foo</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('input');
+		const input = target.querySelector('input');
+		ok(input);
+
+		input.value = 'blah';
+		await input.dispatchEvent(event);
+		await Promise.resolve();
+
+		assert.deepEqual(component.deep, { name: 'blah' });
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input>
+			<p>blah</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-binding-deep2/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let deep = {
+		name: 'foo'
+	};
+</script>
+
+<Widget bind:value={deep}/>
+
+<p>{deep.name}</p>