When the mouse is focused, the control point is not recognized

[RabbitNoTeeth]

In my project, after the rectangle is selected, the mouse moves to the control point, which cannot be recognized, as shown in the first image, this project uses nuxt and tailwind.

However, in another of my projects, there was no such problem, and the mouse moved to the control point and could be recognized normally, as shown in the image below.

The difference between the two projects is that the first project is built on nuxt and uses the tailwind css library,I wonder if this could be the cause of the problem? I have tried various solutions, but nothing has worked.

My code is as follows, sincerely hope to get your help

<template>
  <div class="pe-canvas">
    <client-only>
      <canvas ref="canvasRef"></canvas>
    </client-only>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted} from "vue";
import config from "~/components/pic-editor/config/config.json";
import constants from "~/components/pic-editor/config/constants.json";
import { debounce } from 'lodash-es';
import * as fabric from 'fabric';

const canvasRef = ref(null)
const fabricCanvas = ref(null)
const currentMode = ref(null)
const imageLoaded = ref(false)
const currentImageSrc = ref(null)
const currentZoom = ref(100)
const isUpdating = ref(false);
const emits = defineEmits([
  'zoom-change',
  'mode-change',
  'image-loaded'
])
const currentRectDrawingHandler = ref(null);
const currentDragHandler = ref(null);

/**
 * 
 */
const init = () => {
  const canvas = canvasRef.value
  const width = canvas.parentElement.offsetWidth
  const height = canvas.parentElement.offsetHeight

  fabricCanvas.value = new fabric.Canvas(canvas, {
    width,
    height,
    ...config.background
  });

}

/**
 * 
 * @param mode
 */
const setMode = (mode) => {
  currentMode.value = mode;
  const canvas = fabricCanvas.value;

  canvas.discardActiveObject();
  canvas.requestRenderAll();


  disableRectDrawing();

  switch (mode) {
    case constants.CANVAS_MODE.SELECT:
      canvas.selection = true;
      canvas.defaultCursor = 'default';
      canvas.hoverCursor = 'default';
      switchObjsInteractive([constants.OBJ_CLASS_VALUE.SELECTED_AREA], true);
      break;
    case constants.CANVAS_MODE.RECT:
      canvas.selection = false;
      canvas.defaultCursor = 'crosshair';
      canvas.hoverCursor = 'crosshair';
      switchObjsInteractive([constants.OBJ_CLASS_VALUE.SELECTED_AREA], true);
      enableRectDrawing();
      break;
    default:
      break;
  }

  emits('mode-change', currentMode.value)
}

/**
 * 
 * @param targetObjClasses
 * @param interactive
 */
const switchObjsInteractive = (targetObjClasses, interactive) => {
  const canvas = fabricCanvas.value;
  canvas.getObjects().forEach(obj => {
    if (!targetObjClasses || targetObjClasses.length === 0 || targetObjClasses.includes(obj.get(constants.OBJ_CLASS_KEY))) {
      obj.evented = interactive;
    }
  });
  canvas.requestRenderAll();
}

/**
 *
 */
const enableRectDrawing = () => {
  const canvas = fabricCanvas.value;
  let isDrawing = false;
  let startX = 0;
  let startY = 0;
  let rect = null;

  const mouseDown = (opt) => {
    if (opt.target && opt.target.get(constants.OBJ_CLASS_KEY) === constants.OBJ_CLASS_VALUE.SELECTED_AREA) {
      return
    }

    isDrawing = true;
    const pointer = canvas.getPointer(opt.e);
    startX = pointer.x;
    startY = pointer.y;

    rect = new fabric.Rect({
      left: startX,
      top: startY,
      width: 0,
      height: 0,
      "fill": "transparent",
      "stroke": "oklch(0.645 0.246 16.439)",
      "strokeWidth": 3,
      "strokeUniform": true,
      "hasControls": true,
      "hasBorders": true,
      "selectable": true,
      "lockUniScaling": false,
      "hoverCursor": "pointer",
      "evented": true,
      "minWidth": 5,
      "minHeight": 5,
      transparentCorners: false,    
      cornerColor: 'rgba(102,153,255,0.5)',   
      cornerSize: 16,                
      cornerStyle: 'rect',        
      cornerStrokeColor: '#666',    
      borderColor: '#666',           
      borderScaleFactor: 1,          
      padding: 0                    
    });
    rect.set(constants.OBJ_CLASS_KEY, constants.OBJ_CLASS_VALUE.SELECTED_AREA)

    canvas.add(rect);
  };

  const mouseMove = (opt) => {

    console.log(opt.target)

    if (!isDrawing) return;

    const pointer = canvas.getPointer(opt.e);
    let width = Math.abs(pointer.x - startX);
    let height = Math.abs(pointer.y - startY);

    if (!width || !height) {
      return;
    }

    let left = startX;
    let top = startY;

    if (pointer.x < startX) {
      left = pointer.x;
    }
    if (pointer.y < startY) {
      top = pointer.y;
    }

    rect.set({
      left: Math.floor(left),
      top: Math.floor(top),
      width: Math.round(width),
      height: Math.round(height)
    });

    canvas.requestRenderAll();
  };

  const mouseUp = (opt) => {
    if (!isDrawing) return;
    isDrawing = false;

    if (rect.width < rect.get('minWidth') || rect.height < rect.get('minHeight')) {
      canvas.remove(rect);
    } else {
      canvas.bringObjectToFront(rect);
      canvas.setActiveObject(rect);
    }

    canvas.renderAll();
    rect = null;
  };


  disableRectDrawing()

  
  currentRectDrawingHandler.value = {
    mouseDown,
    mouseMove,
    mouseUp
  };

 
  canvas.on('mouse:down', mouseDown);
  canvas.on('mouse:move', mouseMove);
  canvas.on('mouse:up', mouseUp);
}

/**
 * 
 */
const disableRectDrawing = () => {
  const canvas = fabricCanvas.value;
  if (currentRectDrawingHandler.value) {
    canvas.off('mouse:down', currentRectDrawingHandler.value.mouseDown);
    canvas.off('mouse:move', currentRectDrawingHandler.value.mouseMove);
    canvas.off('mouse:up', currentRectDrawingHandler.value.mouseUp);
    currentRectDrawingHandler.value = null;
  }
}

defineExpose({
  setMode
})

onMounted(() => {
  nextTick(() => {
    init()
  })
})

onBeforeUnmount(() => {
  if (fabricCanvas.value) {
    fabricCanvas.value.dispose();
  }
})

</script>

<style scoped lang="scss">

.pe-canvas {
  @apply w-full flex-1;

  canvas {
    @apply box-border;
  }
}

</style>