data-binding - Svelte で動的に作成されたオプションを使用して、select 入力の値をバインドする方法

Question

外部ソースからのデータが入力された、選択入力のある洗練されたコンポーネントがあります。

特定のオプションが選択されるように選択入力をバインドするにはどうすればよいですか。

オプションの値または選択した値を静的にすると、正常に動作するように見えますが、両方が動的であるとうまくいきません。

これが私のコードです

<script>
    export let params = {}

    let seasons = [];
    let selected = '';

    onMount(async () => {
        selected = params.seasonId; 
    /* fetch is called here and returns a list of seasons, which is passed to seasons array */
    })
</script>

<p><select bind:value={selected}>
    <option value="" disabled>-- Select Season --</option>
    {#each seasons as season}
    <option value={season.id}>{season.description}</option>
    {/each}
</select></p>
<p>param: {params.seasonId}</p>
<p>Selected: {selected}</p>

コードから、これは HTML 出力です。

<p><select>
    <option value="" disabled>-- Select Season --</option>
    <option value="4">2019</option>
    <option value="3">2018</option>
    <option value="2">2017</option>
    <option value="1">2016</option>
</select></p>
<p>param: 3</p>
<p>Selected: 3</p>

ページが読み込まれると、オプション 3「2018」が選択されると予想されますが、変更されず、「--シーズンを選択-」が選択されたオプションになります。