Svelte - Как я могу случайным образом перетасовать выбранные параметры с помощью кнопки?

Я пытаюсь создать кнопку, которая будет перетасовывать параметры моих выбранных раскрывающихся элементов с помощью Svelte.

Идея, в конце концов, заключалась бы в том, чтобы иметь несколько списков выпадающих меню и позволить пользователю выбирать, какой из них он хочет заполнить вручную, а какой просто перетасовать, не вмешиваясь.

Пока у меня есть это, это не работает:

<script>
    let chifumi_1 = [
        { id: 1, text: 'Paper' },
        { id: 2, text: 'Rock' },
        { id: 3, text: 'Scissor' }
    ];
    let chifumi_2 = [
        { id: 1, text: `Paper` },
        { id: 2, text: `Rock` },
        { id: 3, text: `Scissor` }
    ];
    let chifumi_3 = [
        { id: 1, text: `Paper` },
        { id: 2, text: `Rock` },
        { id: 3, text: `Scissor` }
    ];

    function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
    }
</script>

<form class = "pl-2">
    <select bind:value = {chifumi_1}>
        {#each chifumi_1 as chifumi_1}
        <option value = {chifumi_1}>
            {chifumi_1.text}
        </option>
        {/each}
    </select>
    <select bind:value = {chifumi_2}>
        {#each chifumi_2 as chifumi_2}
        <option value = {chifumi_2}>
            {chifumi_2.text}
        </option>
        {/each}
    </select>
    <select bind:value = {chifumi_3}>
        {#each chifumi_3 as chifumi_3}
        <option value = {chifumi_3}>
            {chifumi_3.text}
        </option>
        {/each}
    </select>
</form>

<button 
    style = "border: 1px solid;"
    on:click = {shuffle(chifumi_1)}
    on:click = {shuffle(chifumi_2)}
    on:click = {shuffle(chifumi_3)}>
        Chifumi Randomizer
</button>

Для функции перемешивания я использовал первый ответ на этот запрос

Кто-нибудь может мне помочь?