How to force render after an If condition in the html tag in svelte

This is what I have in the html of my page :

{#each subCategories as subCategories}
                            {#key $cart}
                                    {($cart.indexOf(subCategories.name) > -1)}
                                    {#if ($cart.indexOf(subCategories.name) > -1)}
                                            Test
                                        {:else}
                                                <div class="media ali list-group-item list-group-item-action  clique" on:click={() => changeCart(subCategories.name)}>
                                                    <div class="media-left">
                                                        <Management/>
                                                    </div>
                                                    <div class="media-body"  >
                                                        <h4 class="media-heading">{subCategories.name}</h4>
                                                    </div>
                                                </div>
                                    {/if}
                                {/key}
                            {/each}

for the js part this is what I have :

import { writable } from 'svelte/store';
let cart = writable([])
function changeCart(subCat)
    {
        $cart.push(subCat)
        console.log($cart)
    }

But the problem is that the if condition don’t reload / render another time and the change of case work only after going back to the previous component and going another time to this component.

>Solution :

Because Svelte’s reactivity is triggered by assignments, using array
methods like push and splice won’t automatically cause updates.

Source: https://svelte.dev/tutorial/updating-arrays-and-objects

Solution:

import { writable } from 'svelte/store';
let cart = writable([])

function changeCart(subCat)
{
    // $cart.push(subCat)
    $cart = [...$cart, subCat]
    console.log($cart)
}