Svelte not updating child component

Question

I have an app with a child component. The child component does not update when a variable in the parent changes. The code works fine in the Svelte "REPL". I'm wondering if anyone has any ideas to help debug this.

Using Svelte version 3.29.0

Project structure: App.svelte

<script>
    import Nested from "./Nested.svelte"

    const mouse_move = v => () => {
        selected_index = v
        console.log(selected_index)
    }

    let selected_index = 1;
</script>
{selected_index}
<Nested name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

Nested.svelte

<script>
    export let name = "Ready";
    export let mouseenter = () => {};
    export let mouseleave = () => {};
</script>

<h1 on:mouseenter={mouseenter} on:mouseleave={mouseleave}>Hello {name}!</h1>

Hovering over the h1 text causes selected_index to change from 1 to here. That is rendered by {selected_index} but the Nested element remains unchanged on my localhost version but changes fine in the Svelte "REPL".

Any thoughts on what / how to debug would be appreciated.

** edit **

When I built it for production and serve locally it works fine. Tried the following things and none of them worked:

deleted all node_modules and reinstalling
running in incognito
running in different browsers

Your code works. (tried with svelte 3.29.0, 3.30.0) i.imgur.com/M7xfwZV.png — falsetru
maybe bundle.js was being served from cache, for example a service worker — OmG3r

PAA-KOFI AIDOO PAA-KOFI AIDOO · Accepted Answer · 2021-07-06T17:09:08

bind the name

<Nested bind:name={selected_index} mouseenter={mouse_move("here")} mouseleave={mouse_move("gone")}/>

Svelte not updating child component

1 Answers