Append new Item to Div Container in svelte after addEventListener Message

so as you can see I have created a component. And I am reporting to my script that I am listening for a window event listener(message). I actually want to make that every time this EventListnere is called, that I add a new Notification under gold notify box. How would I archive that in svelte. ?

<script>

    import Notification from './Components/Notification.svelte';
    let type,text,time,title,icon,position,top,progress
    let slideIn = true;
    let showNoti;
    $: if(!slideIn) {
        slideIn === false;
    } 

window.addEventListener('message', (event) => {
    showNoti = true;
    if(showNoti) {

        let data = event.data;
        type = data.type
        text = data.text
        time = data.time
        title = data.title
        icon = data.icons;
        top = data.top;
        progress = data.progress;
        position = data.position;
        if(type == "success") {
            type = "success"
        }else if(type == "error") {
            type = "error"
        }else if(type == "money") {
            type = "money"
        }
        setTimeout(() => {
            slideIn = false;
        }, time);
    }
});



</script>


<main> 
{#if showNoti}
    <div class="notif-container {position}" style="top: {top}">
        <div class="gold-notify-box">
                <Notification text={text} type={type} time={time} title={title} icon={icon} position={position} top={top} progress={progress} slideIn={slideIn} />
          </div>
    </div>

{/if}

</main>

<style>
    
</style>