javascript - Svelte は、値が変更されたときにコンポーネントを更新しません

Question

私は過去に Vue.js を広範囲に使用していたので、このパターンはうまく翻訳できないかもしれませんが、それは理解しています。

私の質問は、なぜ次のものがsvelteで機能しないのか、そして使用する正しいパターンは何ですか.

編集ボタンをクリックすると期待どおりに動作しますが、保存をクリックしてもメイン コンポーネントに戻りません。値は更新されているように見えますが、コンポーネントは更新されません。

Main.svelte

<script>
        import Editing from './editing.svelte';
        let data = true;
    let editing = false;
    let editingSection;

    function startEditing(section) {
        editingSection = section;
        editing = true;
    }

    function doneEditing() {
        editing = false;
        editingSection = '';
    }

</script>

<div>
    {#if data && !editing}
        <div>
                  Yes we have data!
        <button on:click={startEditing("main")}>Edit</button>
        </div>
    {/if}

    <!-- Are we in editing mode -->
    {#if editing}
        <Editing section={editingSection} on:done-editing={doneEditing}/>
    {/if}
</div>

編集.svelte

<script>
    import { createEventDispatcher } from 'svelte';
    export let section = null;

    const dispatch = createEventDispatcher();

    function save() {
        dispatch('done-editing');
    }

</script>

<div>
    Editing Section {section}
    <button on:click={save}>Save</button>
</div>

$: ステートメントを反応的にすることさえ試みました。動作しません

スリムなバージョン: 3.34.0

スベルテキット