SwiperJS breakpoint pagination issue

I’m creating a swiper slider using the SwiperJS library. On Desktop, I’d like to show custom pagination and on mobile, I’d like to set the pagination type to “bullets”. The issue is that the pagination type doesn’t change when I resize my browser until I manually refresh the page. Any help would be greatly appreciated. Here’s the code:

HTML:

<div class="swiper">
  <div class="swiper-wrapper">
    
    <div class="swiper-slide">
      <p>slide 1</p>
    </div>
    
    <div class="swiper-slide">
      <p>slide 2</p>
    </div>
    
  </div>
  
  <div class="swiper-pagination"></div>
</div>

JS:

let mySlider = new Swiper('.swiper', {
      
      slidesPerView: 1.1,
      spaceBetween: 10,
      observer: true,
      observeParents: true,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'bullets'
      },
      
      breakpoints: {
        768: {
          pagination: {
            type: 'custom',
            renderCustom: function (swiper, current, total) {
              return current + ' - ' + total
            }
          }
        }
      },

      on: {
        breakpoint: function (swiper) {
          swiper.update()
          // Also tried swiper.destroy(), swiper.pagination.init() and swiper.init()

        }
      },
      
    })