Vue Js Draggable Div | Resize div on drag

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Resize div on drag and drop</h3>
        <div class="Block" ref="block">
            <div id="Resizable1" :style="{ width: resizable1Width + '%' }"  style='background-color:#C51162;'class="ResizableBlock"></div>
            <div id="Draggable" draggable="true" @mousedown="startDrag" class="Draggable"></div>
            <div id="Resizable2" :style="{ width: 100 - resizable1Width + '%' }"  style='background-color:#AA00FF;' class="ResizableBlock"></div>
        </div>
    </div>

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    draggable: false,
                    resizable1Width: 20,
                };
            },
            methods: {
                startDrag() {
                    this.draggable = true;
                    window.addEventListener("mousemove", this.handleDrag);
                    window.addEventListener("mouseup", this.stopDrag);
                },
                handleDrag(event) {
                    if (this.draggable) {
                        const draggableWidth = event.clientX - this.$refs.block.getBoundingClientRect().left;
                        const blockWidth = this.$refs.block.offsetWidth;
                        const newResizable1Width = (draggableWidth / blockWidth) * 100;
                        this.resizable1Width = newResizable1Width.toFixed(2);
                    }
                },
                stopDrag() {
                    this.draggable = false;
                    window.removeEventListener("mousemove", this.handleDrag);
                    window.removeEventListener("mouseup", this.stopDrag);
                },
            },
        });
    </script>

<style>
        #app {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

.Block {
            display: flex;
            align-items: center;
        }

.ResizableBlock {
            border: 1px solid black;
            height: 200px;
        }

.Draggable {
            background: rgba(1, 1, 1, 0.2);
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top: 1px solid black;
            cursor: col-resize;
            height: 200px;
            width: 10px;
        }
    </style>
</body>

</html>