Navigation doesn't work in SvelteKit

[s-peryt]

I'm trying to understand how to fix issue I'm experiencing in my SvelteKit app when using Swiper.
I have a list of products which are loaded from db. When I'm refreshing website everything is working as expected. However, when I'm just loading new data Swiper's elements are not updated and navigation is not working at all. Can someone help out and suggest how to deal with this?

This is how (roughly) my component looks like:

{#each products as product (product.id)}
     <div class="relative bg-white border cursor-pointer rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
          <div class="card max-w-72 shadow-xl">
              <div>
               <swiper-container class="mySwiper grid grid-flow-col auto-cols-[100%] grid-rows-[190px] gap-x-[10px]" navigation="true">
                   {#each product.pictures as src}
                       <swiper-slide>
                           <img
                              class="relative w-full h-full object-cover rounded-[.25rem] z-10"
                              {src}
                               alt=""
                               on:error={handleError}
                             />
                        </swiper-slide>
                       {/each}
                </swiper-container>
          </div>
 ....
{/each}

Do I need to use Svelte reactive statements to properly handle such cases? If so - what should I do for each change in products?

[s-peryt]

It turned out I should have use update() with reactive statements based on products updated.