javascript - Svelte で双方向バインド コンポーネントが 2 回更新されるのはなぜですか?

Question

私は次のようにactivity.status<select>にバインドしています:

<script>
import Dropdown from './Dropdown.svelte'
let activity = {
    id: 1,
    projectName: "Test Project",
    lead: {id: 10, value: "Unassigned"},
    status: {id: 3, value: "Closed"},
    statusDetail: {id: 15, value: "Missing Budget"}
    }

let statusOptions = [
        { id:1, value:"Open"},
        { id:2, value:"On-Hold"},
        { id:3, value:"Closed"}
        ]

$:console.log(activity.status);
</script>

<select bind:value={activity.status}>
    {#each statusOptions as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

<!-- <Dropdown  options={statusOptions} bind:selected={activity.status}/> -->

$:console.log(activity.lead)を更新するたびに発火します<select>。

しかし、<Dropdown/>代わりに を使用すると、2 回起動します。コンポーネントは次のとおりです。

<script>
export let selected = {} 
export let options = [{id:0, value: "No Options..."}]
</script>

<select bind:value={selected}>
    {#each options as option}
        <option value={option} >{option.value}</option>
    {/each}
</select>

svelte に関しては大した知識はありませんが、API を調べたり、stackoverflow で検索したりしました。私が試していない唯一のことは、カスタム イベントを発行することでした。しかし、それは少し余分なコードのように見え、エレガントではありません。二重更新は気にしませんが、ばかげているようです。だから私は知りたいです：なぜそれが起こるのですか？代わりにカスタム イベントを発行する必要がありますか? それとも、基本的な間違いを犯しましたか？

ありがとう、フィリップ