Create dragbar to resize div in Vue

Question

So, I am trying to create a dragbar to resize div in my Vue application. I am trying to replicate the most voted answer of this question Making a dragbar to resize divs inside CSS grids. But for some reason if I just replicate this code as it is, it's not working. So, I created a method to make it work.

My complete code is

<template>
<div class="wrapper">
  <div class="box">

  <TableComp :dataset="dataset" :getdata="getdata"/>
  </div>
  <div @click="res" class="handler"></div>
  <div class="box">

  <GraphComp :prac="data" :target="target" :source="source"  />
</div>
</div>

</template>

<script lang="ts">
import { defineComponent } from "vue"
import dataset from "./ds.json"
import TableComp from '../components/TableComp.vue'
import GraphComp from '../components/GraphComp.vue'


export default defineComponent ({
  name: 'HomePage',
  props: {},
  components: {
      TableComp,
      GraphComp
   },
  data(){
    return {
      dataset:dataset,
      data:{},
      table_data_child:{},
      source_from_table:String,
      target_from_table:String,
      source:String,
      target:String      
    }
  },
  methods: {
    getdata(table_data_child: any,source_from_table: any,target_from_table: any){
      this.data = table_data_child
      this.source = source_from_table
      this.target = target_from_table
      console.log(this.data)
    },
    res(){
          var handler = document.querySelector('.handler') as HTMLElement;
          var wrapper = handler.closest('.wrapper') as HTMLElement;
          var boxA = wrapper.querySelector('.box') as HTMLElement;
          var isHandlerDragging = false;

          document.addEventListener('mousedown', function(e) {
            if (e.target === handler) {
              isHandlerDragging = true;
            }
          });

          document.addEventListener('mousemove', function(e) {
            if (!isHandlerDragging) {
              return false;
            }
            var containerOffsetLeft = wrapper.offsetLeft;
            var pointerRelativeXpos = e.clientX - containerOffsetLeft;
            var boxAminWidth = 60;
            boxA.style.width = (Math.max(boxAminWidth, pointerRelativeXpos - 8)) + 'px';
            boxA.style.flexGrow = "0";
          });

          document.addEventListener('mouseup', function(e) {
            isHandlerDragging = false;
          });
    }
  }
})
</script>

<style scoped>
body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #fff;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #fff;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: grey;
  margin: 0 auto;
}
</style>

The res method if the one that allows me to resize the bar. But the resizing is very slow, is there a better way to do it?

PS: I have tried to execute the same thing without a method i.e outside the export default defineComponent but in that case the resizing does not work at all.