A Ruler component Made with vuejs is glitchy and markers appear and disappear

i was making a ruler component to use in a simple photo editing tool and i implemented the zooming part it is supposed to get more detailed when you zoom in like fractals and less detailed when you zoom out but for some reason the elements appear and disappear when you zoom in in different zoom levels what i have noticed is that the div elements are still there but there width seems to become 0 so suddenly could this i don’t have a single clue that is happening
here is my component

<script setup>
import { onMounted, ref, watch, computed } from "vue";
import { canvasContainer, tabsContainer } from "../cglobals";

const MIN_ZOOM = 0.5;
const MAX_ZOOM = 10;
const MIN_INTERVAL = 10; // Minimum interval for numbers

const props = defineProps({
  horizontal: {
    type: Boolean,
    default: true,
  },
  zoom: {
    type: Number,
    default: 1,
  },
});

const rulerBody = ref(null);
const markers = ref([]);

function clampZoom(zoom) {
  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
}

const computedMarkers = computed(() => {
  const zoomLevel = clampZoom(props.zoom);
  const interval = MIN_INTERVAL * zoomLevel;
  const rulerWidth = rulerBody.value ? rulerBody.value.getBoundingClientRect().width : 0;
  const maxStepCount = Math.floor(rulerWidth / interval);
  const stepValue = 100 / zoomLevel; // Adjust step value based on zoom level

  const newMarkers = [];
  for (let i = 0; i <= maxStepCount; i++) {
    newMarkers.push({
      isNumbered: i % 10 === 0,
      value: (i * stepValue).toFixed(0),
      marginLeft: i === 0 ? '0px' : `${interval}px`,
    });
  }
  return newMarkers;
});

onMounted(() => {
  watch(canvasContainer, (newVal) => {
    if (newVal && rulerBody.value) {
      rulerBody.value.style.width = `${canvasContainer.value.offsetWidth}px`;
      rulerBody.value.style.marginTop = `${tabsContainer.value.offsetHeight}px`;
    }
  });
  watch(props, () => {
    markers.value = computedMarkers.value;
  });
  watch(() => props.zoom, () => {
    markers.value = computedMarkers.value;
  });
});
</script>

<template>
  <div ref="rulerBody" class="rulerBody h-7 absolute">
    <div v-for="(marker, index) in markers" :key="index" :class="['smallmarker', { numberedmarker: marker.isNumbered }]" :style="{ marginLeft: marker.marginLeft }">
      <div v-if="marker.isNumbered" class="numbermarker">{{ marker.value }}</div>
    </div>
  </div>
</template>

<style lang="scss">
@import "../../styles/colors";

.rulerBody {
  background: transparent;
  @apply border-b border-gray-400 relative flex ;
  .smallmarker {
    @apply h-3 bg-white;
    width: 1px !important; // Ensure the width is 1px
    position: relative;
  }
  .numberedmarker {
    height: 5px !important; // Make numbered markers longer
  }
  .numbermarker {
    position: absolute;
    top: -20px; // Adjust as needed
    left: -5px; // Adjust as needed
    color: white;
    font-size: 10px;
    height: 30px;
  }
}
</style>

sometimes its like this

some times its like this

if anyone has a fix or a problem they see help me out

i was expecting for the ruler to resize its detail level based on the zoom property and become detailed like 100,120,140,160 and when you zoom out it should be like 100, 1000, 2000, 3000