Vue drag to change the width of the sidebar div

this is someone else"s example, and then I tried to write it in vue, but I couldn"t write it.

< html >

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
         *{margin: 0;padding: 0;}
        -sharpbox{position: absolute;right: 0;width: 200px;height: 100%;background-color: -sharp007AFF;} 
        -sharpline{width: 2px;height: 100%; background-color: -sharp000;position: absolute; right: 200px;cursor: e-resize;} 
    </style>  
    <script type="text/javascript">  
        window.onload=function(){  
            var oBox=document.getElementById("box"); 
            var oLine = document.getElementById("line");
            var b="";//ab;  
            var a="";  
            oLine.onmousedown=function(ev){  
                var iEvent=ev||event;  
                var dx=iEvent.clientX;//x  
                var dy=iEvent.clientY;//Y  
                var dw=oBox.offsetWidth;//div  
                var dh=oBox.offsetHeight;//div  
                var disright=oBox.offsetLeft+oBox.offsetWidth;//div  
                var distop=oBox.offsetHeight+oBox.offsetTop;//div  
                if(iEvent.clientX<oBox.offsetLeft+10){//  
                    b="left";  
                }  
                document.onmousemove=function(ev){  
                    var iEvent=ev||event;
                    if(b=="left"){  
                        oBox.style.width=dw-(iEvent.clientX-dx)+"px";//iEvent.clientX-dxXXdiv   
                        oBox.style.left=disright-oBox.offsetWidth+"px";//disrightdisright-  
                        oLine.style.left = disright-oBox.offsetWidth-2+"px";//disright
                        if(oBox.offsetWidth<=10){  
                            oBox.style.width="10px";  
                            oBox.style.left=disright-oBox.offsetWidth+"px";//  
                        }  
                    }  
                      
                };  
                document.onmouseup=function(){  
                    document.onmousedown=null;  
                    document.onmousemove=null;  
                };  
                return false;  
            };  
        };  
    </script>  
</head>  
<body style="height: 100%;">  
        <div id="line"></div>
    <div id="box"></div>  
</body>

< / html >

this is my code
< template >
< div class= "tagmanange-box" id= "" >

<div class="taglibdata-box" id="taglibDataBox">
  <tag-lib-data></tag-lib-data>
  <div class="drag-btn" id="dragBtn"
       @mousedown="mouse_down"
       @mousemove="mouse_move"
       @mouseup="mouse_up"></div>
</div>
<div class="regulation-box"></div>
<div class="database-box"></div>

< / div >
< / template >

< script type= "text/ecmascript-6" >
import tagLibData from". / tagLibData";

export default {
components: {

tagLibData,

},
props: [],
name:"",
data () {

return {
  b: "",
  dw: 0,
  dx: 0,
  disright: 0,
};

},
methods: {

mouse_down(ev) {
  console.log("11");
  const tagBox = document.getElementById("taglibDataBox");
  const iEvent = ev || event;
  this.dx = iEvent.clientX;
  this.dw = tagBox.offsetWidth;
  this.disright = tagBox.offsetLeft + tagBox.offsetWidth;
  if (iEvent.clientX > tagBox.offsetLeft + 10) {
    this.b = "left";
  }
},
mouse_move(ev) {
  console.log("22");
  const tagBox = document.getElementById("taglibDataBox");
  const dragBtn = document.getElementById("dragBtn");
  if (this.b === "left") {
    const iEvent = ev || event;
    const dx = iEvent.clientX; // x
    const dy = iEvent.clientY; // Y
    const dw = tagBox.offsetWidth; // div
    const dh = tagBox.offsetHeight; // div
    const distop = tagBox.offsetHeight + tagBox.offsetTop;
    const disright = tagBox.offsetLeft + tagBox.offsetWidth;
    tagBox.style.width = `${this.dw + (iEvent.clientX - this.dx)}px`;
    // tagBox.style.left = `${this.disright + tagBox.offsetWidth}px`;
    dragBtn.style.left = `${disright + tagBox.offsetWidth - 2}px`;
    if (tagBox.offsetWidth <= 10) {
      tagBox.style.width = "10px";
      tagBox.style.left = `${disright - tagBox.offsetWidth}px`;
    }
  }
},
mouse_up(ev) {
  console.log("33");
  this.mouse_down = null;
  this.mouse_move = null;
},

},
mounted () {
},
};
< / script >

< style scoped >

< / style >

my heart is tired. Call for help from all the bigwigs