Vue3 draggable left and right panel split component implementation

<div id="line" class="w-2 cursor-move hidden md4:block"onMousedown={hnadleMouseDown}>
</div>

    const hnadleMouseDown = (evt: MouseEvent) => {
      /* Get the starting point and store it*/
      let { pageX, pageY } = evt;
      basePosition.pageX = pageX;
      basePosition.pageY = pageY;
      /* Listen for mouse movement events*/
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };
    const handleMouseMove = evt => {
      /* Prevent browser default events from triggering the browser's gesture function*/
      evt.preventDefault();
      /* Set the timer to prevent DOM from reflowing multiple times*/
      clearTimeout(timer.value);
      timer.value = setTimeout(() => {
        let { pageX } = evt;
        const baseDiv = document.querySelector(".right-border-shadow");
        /* Process width, whether it is between the maximum/minimum value*/
        let baseWidth: Number | undefined =
          Number(baseDiv?.clientWidth) + (pageX - basePosition.pageX);
        baseWidth =
          baseWidth > Number(props?.maxWidth) ? props.maxWidth : baseWidth;
        baseWidth =
          Number(baseWidth) < Number(props?.minWidth)
            ? props.minWidth
            : baseWidth;
        baseDiv?.setAttribute("style", `width:${baseWidth}px`);
        /* emit width changed event */
        ctx.emit("drugend");
        /* Store to store */
        setStore(baseWidth);
      }, 50);
    };
    const handleMouseUp = evt => {
      /* After dragging ends, cancel event listening and emit the final width*/
      const width = document.querySelector(".right-border-shadow")?.clientWidth;
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
      ctx.emit("drugend", width);
    };

style={`width:${
            store.get("split-width")
              ? store.get("split-width")
              : props.minWidth
              ? props.minWidth
              : 384
          }px`}

nextTick(() => {
        ctx.emit("load", ctx);
        MutationObserver = window.MutationObserver;
        if (MutationObserver) {
          /* Monitor browser window changes, this API is required in some cases */
          mo = new MutationObserver(function() {
            const __wm = document.querySelector("#rezie-id");
            // Re-call __canvasWM only when the __wm element changes
            if (!__wm) {
              //Avoid triggering mo.disconnect() all the time;
              mo = null;
              ctx.emit("resize");
            }
          });
          mo.observe(document.querySelector("#rezie-id"), {
            attributes: true,
            subtree: true,
            childList: true,
          });
        }
      });