update keyed each when key expression changes (#5447)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix keyed `{#each}` not reacting to key changing ([#5444](https://github.com/sveltejs/svelte/issues/5444))
 * Fix destructuring into store values ([#5449](https://github.com/sveltejs/svelte/issues/5449))
 * Fix erroneous `missing-declaration` warning with `use:obj.method` ([#5451](https://github.com/sveltejs/svelte/issues/5451))
 

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -239,6 +239,11 @@ export default class EachBlockWrapper extends Wrapper {
 		this.node.expression.dynamic_dependencies().forEach((dependency: string) => {
 			all_dependencies.add(dependency);
 		});
+		if (this.node.key) {
+			this.node.key.dynamic_dependencies().forEach((dependency: string) => {
+				all_dependencies.add(dependency);
+			});
+		}
 		this.dependencies = all_dependencies;
 
 		if (this.node.key) {

test/runtime/samples/each-block-keyed-dyanmic-key/_config.js

@@ -0,0 +1,27 @@
+let count = 0;
+let value = 'foo';
+
+export default {
+	props: {
+		value() {
+			count++;
+			return value;
+		}
+	},
+
+	html: `
+		<div>foo</div>
+		<div>foo</div>
+	`,
+
+	test({ assert, component, target }) {
+		value = 'bar';
+		component.id = 1;
+
+		assert.equal(count, 4);
+		assert.htmlEqual(target.innerHTML, `
+			<div>bar</div>
+			<div>bar</div>
+		`);
+	}
+};

test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let id = 0;
+	export let value;
+</script>
+
+{#each ['foo', 'bar'] as key (id + key)}
+	<div>{value()}</div>
+{/each}