How to refresh swiper slides properly that use data-background and lazy after updated with new data?

I do not know if anyone have been had this issue before,

I am using swiper with data-background and lazy, the swiper is feeded with data after my api request returns the data of stores.

I used also newDate to add this at the end of the image with ?nocache={{…/newDate}} to avoid the image to be cached but still there is some issues regarding this.

API request returns all stores inside data variable and I set the data content inside stores variable and init the swiper slider with create…

self.$setState({
   stores: data,
   loadedStores: true,
   newDate: new Date().getTime()
}).then(() => {

              var swiper_stores = self.$app.swiper.create(
                '.swiper-container.stores', {
                  lazy: {
                    threshold: 50,
                    observer: true,
                    loadPrevNext: true,
                    loadPrevNextAmount: 2,
                  },
                  centeredSlides: false,
                  watchSlidesVisibility: true,
                  preloadImages: false,
                  lazy: true,
                  loop: false,
                  loadPrevNextAmount: 2,
                  slidesPerView: 'auto',
                  spaceBetween: 10,
                  pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                    clickable: true,
                  },
                  scrollbar: {
                    el: '.swiper-scrollbar',
                    hide: true,
                  },
....
 });

My swiper slider

      {{#if loadedStores}}
      <div class="swiper-container stores default-swiper swiper-lazy"
          data-pagination='{"el": ".swiper-pagination"}'
          data-lazy='{"enabled": true, "loadPrevNext": true, "loadPrevNextAmount": 2, "loadOnTransitionStart": false}'
          data-space-between="10" data-observer="true" data-slides-per-view="auto" data-loop="false">
          <div class="swiper-wrapper">
            {{#if stores.length}}
            {{#each stores}}
            <div class="swiper-slide swiper-lazy with-gradient" data-background="{{this.image.current_url}}?nocache={{../newDate}}"
              data-name="{{this.name}}" data-id="{{this.id}}">
....
</div>

The first time the swiper slider is created it works and not problem at all… but if I filter the store array to update the store variable content with new data the content inside the slide is properly changed but the images are not and mixed according the previously index position.

To explain this:

My app has filters for instance to filter stores by category.

The console shows perfectly the changes done to the store array and I apply the changes, the content inside slides are properly changed but the background images of the slides are not well ordered and mixed according the previous slides position that was before filtering it … also the length of the swiper slider remains equal to the previously size length creating empty spaces at the end.
Here I filter the store array by category and I update store variable with new data and I update the swiper slider as well.

categoryId = 1
var filteredStores = app.data.stores.filter(item => {
  return item.category_id == categoryId;
});

self.$setState({
   stores: filteredStores,
   newDate: new Date().getTime()
}).then(() => {
   swiper_stores.update();
...

still I do not know what is causing this issue…

So my question:

How to refresh swiper slides properly with data-background and lazy? so the images can fit into their place with the right content and also the length of the swiper slider properly updated for not creating empty spaces at the end?

thanks a lot for any tips!