我有这个 Svelte 代码：

玩家.svelte：

<script>
    import PlayerControls from './PlayerControls.svelte';

    let audio;
</script>

<audio src={...} bind:this={audio} />
<PlayerControls {audio} />

PlayerControls.svelte：

<script>
    import PlayIcon from '../icons/PlayIcon.svelte';
    import PauseIcon from '../icons/PauseIcon.svelte';

    export let audio;

    const onClick = () => {
        if (audio?.paused) audio.play();
        else audio.pause();
    };
</script>

{#if audio?.paused}
    <PlayIcon {onClick} />
{:else}
    <PauseIcon {onClick} />
{/if}

如果我按播放图标，图标不会改变，但音频开始，如果我再次单击，音频停止，图标不变。似乎audio.paused仅在脚本中“更改”，而不是在html中。这里有什么问题，以及我对 Svelte 有什么不理解的地方？