nuxt-swiper how to use hash navigation?

<template>
  <div>
    <div>
      <p class="font-semibold text-3xl text-center my-4">Random Map:</p>
      <swiper
          :slides-per-view="4"
          :space-between="30"
          :centered-slides="true"
          :grabCursor="true"
          :loop="true"
          :hash-navigation="{
            watchState: true,
          }"
          class="mySwiper"
      >
        <swiper-slide v-for="(map, index) in mapNamesArray" :key="index" :data-hash="index">
          <h1 class="text-center text-3xl font-bold text-white absolute z-1">{{ map }}</h1>
          <img :src="mapImagesArray[index]" alt="map image">
        </swiper-slide>
      </swiper>

    </div>


  </div>
</template>

<script setup lang="ts">
let url = "https://valorant-api.com/v1/maps"

let { data: mapsRef, error } = useFetch(url)
watch(error, async (newVal) => {
  if (newVal) {
    console.error("Error fetching maps:", newVal.message)
  }
})
let parsedMaps = computed(() => {
  return mapsRef.value?.data.filter((m) => !!m.narrativeDescription)
})

let mapNamesArray = computed(() => {
  return parsedMaps.value?.map((m) => m.displayName)
})

let mapImagesArray = computed(() => {
  return parsedMaps.value?.map((m) => m.splash)
})
</script>

<style scoped lang="scss">

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

//make img cover the whole swiper-slide
//.swiper-slide img {
//  width: 100%;
//  height: 100%;
//  object-fit: cover;
//  border-radius: 18px;
//}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>

<template>
  <div>
    <div>
      <p class="font-semibold text-3xl text-center my-4">Random Map:</p>
      <swiper
          :slides-per-view="4"
          :space-between="30"
          :centered-slides="true"
          :grabCursor="true"
          :loop="true"
          :hash-navigation="{
            watchState: true,
          }"
          class="mySwiper"
      >
        <swiper-slide v-for="(map, index) in mapNamesArray" :key="index" :data-hash="index">
          <h1 class="text-center text-3xl font-bold text-white absolute z-1">{{ map }}</h1>
          <img :src="mapImagesArray[index]" alt="map image">
        </swiper-slide>
      </swiper>

    </div>


  </div>
</template>

<script setup lang="ts">
let url = "https://valorant-api.com/v1/maps"

let { data: mapsRef, error } = useFetch(url)
watch(error, async (newVal) => {
  if (newVal) {
    console.error("Error fetching maps:", newVal.message)
  }
})
let parsedMaps = computed(() => {
  return mapsRef.value?.data.filter((m) => !!m.narrativeDescription)
})

let mapNamesArray = computed(() => {
  return parsedMaps.value?.map((m) => m.displayName)
})

let mapImagesArray = computed(() => {
  return parsedMaps.value?.map((m) => m.splash)
})
</script>

<style scoped lang="scss">

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

//make img cover the whole swiper-slide
//.swiper-slide img {
//  width: 100%;
//  height: 100%;
//  object-fit: cover;
//  border-radius: 18px;
//}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>