diff --git a/.gitignore b/.gitignore
index cac3d80..73504b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 public/bundle*
+node_modules
diff --git a/src/App.html b/src/App.html
index 60f975f..80eb9ab 100755
--- a/src/App.html
+++ b/src/App.html
@@ -2,7 +2,7 @@
 
 <ol>
 	{{#each arrayToDisplay as id}}
-		<Top bind:top="idToTop[id]">
+		<Top bind:top="idToTop[id]" key="{{id}}">
 			<li>{{id}}: top is {{idToTop[id]}}</li>
 		</Top>
 	{{/each}}
@@ -10,7 +10,7 @@
 
 <script>
 	import Top from './Top.html'
-	
+
 	export default {
 		data() {
 			return {
@@ -31,4 +31,4 @@
 			this.observe('idToTop', map => console.log(map))
 		}
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/src/Top.html b/src/Top.html
index 3241dae..82e5f65 100755
--- a/src/Top.html
+++ b/src/Top.html
@@ -9,6 +9,11 @@
 			window.addEventListener('scroll', listener)
 			this.set({ listener })
 			this.updateTop()
+
+			this.observe('key', id => {
+				console.log('detected id change to', id)
+				this.updateTop()
+			})
 		},
 		ondestroy() {
 			const listener = this.get('listener')