Why this work only using setTimeout and not normally?

I created a REPL for a strange issue.

REPL: https://stackblitz.com/edit/sveltejs-kit-template-default-9zkjpt?file=src%2Froutes%2Fabout%2FCustomSelect.svelte

Steps to reproduce

1. Open the REPL

2. Open the browser console

3. Go on the “About” page using the link

4. No message in console

5. Now comment the line:

   result = id;
   

6. And comment out the line:

   // setTimeout(() => (result = id), 0);
   

7. Go on Home page

8. Go on About page

9. Now in the console you can see the message: “handleInput”

Why is this happening?

Is setTimeout really needed?

Relevant code

• CustomSelect.svelte:

<script>
    import Select from 'svelte-select';

    export let value = undefined;
    export let id = undefined;
    
    $: console.log('CustomSelect, id:', id);

    let result;

    let items = [
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
    ];

    $: if (id !== undefined) {
        result = id;
        // setTimeout(() => (result = id), 0);
    }

    $: if (result != undefined) {
        value = { value: 'custom', label: 'Custom' }
    }
</script>

<Select {value} {items} on:change on:input />