Swiper options is not reactive with vue

Question

I am using swiper with vue3 and vite. I have the following options for swiper8.

    <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="0"
        :direction="'vertical'"
        :speed="1500"
        :mousewheel="{
        forceToAxis: true,
        sensitivity: 1,
        releaseOnEdges,
      }"
        :height="800"
        :prevent-interaction-on-transition="true"
        @slideChange="onSlideChange"
        @reachEnd="onReachEnd"
    >
        ...irrelevant stuff
    </swiper>

Also, I am controlling the releaseOnEdges with the following code.

    setup() {

    const releaseOnEdges = ref(true)

    const onSlideChange = (swiper) => {
      setTimeout(function () {
        releaseOnEdges.value = false
        console.log('swiper change: ', swiper)
      }, 500);
    }

    const onReachEnd = (swiper) => {
      setTimeout(function () {
        releaseOnEdges.value = true
        console.log('swiper end: ', swiper)
      }, 750)
    }

    return {
      releaseOnEdges,
      onReachEnd,
      onSlideChange,
      modules: [Mousewheel],
    }
    }

The last slide scrolls down so fast and the animation is not smooth. That's what I am trying to solve here.

Now, you see the console log in onSlideChange and onReachEnd. I am logging the swiper object. It's supposed to change the releaseOnEdges to false when onSlideChange happens. But it is always true even though the swiper options are reactive. So, what am I doing wrong here?