How to create interactive image like map on vue?

I try build custom map. I have image and i want to select somewhere and some information. After adding points i change resize window point locations changes. does possible do that points don't change location that image? here my code:

<template>
  <div class="px-20">
    <div class="mt-10 shadow-2xl relative" ref="imageContainer">
      <img :src="BL" class="w-full h-auto cursor-pointer" @click="addPoint" />
<div
v-for="(point, index) in points"
:key="index"
class="absolute"
:style="{
top: ${point.y}px,
left: ${point.x}px
}"
>
<div
class="bg-red-500 text-white text-xs font-semibold py-1 px-2 rounded-full flex items-center"
>
{{ point.label }}
<button
@click.stop="removePoint(index)"
class="bg-red-700 text-white text-xs font-bold rounded-full ml-1 w-4 h-4 flex items-center justify-center"
>
x
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import BL from '@/assets/Tm_Map.jpg' // Replace with your image path
const points = ref([])
let pointId = 0
const imageContainer = ref(null)
const resizeObserver = ref(null)
function addPoint(event) {
const rect = event.target.getBoundingClientRect()
const x = event.clientX - rect.left // Get x position relative to the image
const y = event.clientY - rect.top // Get y position relative to the image
points.value.push({
x,
y,
label: Point ${++pointId}
})
}
function removePoint(index) {
points.value.splice(index, 1)
}
</script>

If possible help me!