JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <div class="wrapper">
    <div class="left" :style="{ width: leftWidth + 'px' }">
      <div class="content">
        Column 1
      </div>
    </div>
    <handler ref="handler"></handler>
    <div class="right">
      <div class="content">
        Column 2
      </div>
    </div>
  </div>
  
  <!-- log -->
  <ul>
    <li>x: {{ offset.x }}</li>
    <li>y: {{ offset.y }}</li>
    <li>prevWidth: {{ prevWidth }}</li>
    <li>currentWidth: {{ leftWidth }}</li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  color: #666;
}

.wrapper {
  display: table;
  height: 300px;
  width: 100%;
}

.left,
.right {
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}

.left {
  background-color: #99f0bb;
}

.right {
  background-color: #99bbf0;
}

.content {
  padding: 10px;
  height: 100%;
  width: 100%;
  border: 1px solid #666;
}

.handler {
  display: table-cell;
  background-color: #f58833;
  height: 100%;
  width: 4px;
  cursor: col-resize;
}

JavaScript

var Handler = {
  template: '<div draggable="true" class="handler" @dragstart="dragstart"></div>',
  
  data: function() {
    return {
      initialPos: {
        x: 0,
        y: 0
      }
    }
  },
  
  mounted() {
		this.$nextTick(()=>{
    
      var _this = this
      console.log('entro aqui');
      this.$parent.$el.addEventListener('dragover', function(e) {

        _this.drag(e)
      })
    })      
    
  },
  
  methods: {
  	dragstart: function(e) {
      // hide the 'ghost' of the draggin element
      e.dataTransfer.setDragImage(document.createElement('div'), 0, 0);
      
      // set dummy data for dragging Firefox
      e.dataTransfer.setData('text/plain', '')
      
      // save the starting pos of drag
      this.initialPos = {
      	x: e.pageX,
        y: e.pageY
      }
      this.$emit('dragstart')
    },
    
    drag: function(e) {
      // prevent to emit unwanted value on dragend
    	if (e.screenX === 0 && e.screenY === 0) return
      
      // notify the offset of the starting pos
      this.$emit('drag', {
        x: e.pageX - this.initialPos.x,
        y: e.pageY - this.initialPos.y
      })
    }
  }
}

new Vue({
  el: '#app',
  
  data: {
    // only calculate left column's width
    // because css display: table; can auto calculate the right colum
  	leftWidth: 150,
    prevWidth: 150,
    
    // log
    offset: { x: 0, y: 0 }
  },
  
  mounted() {
		this.$nextTick(function () {
    
      var _this = this
      console.log(this.$refs.handler);
      var handler = this.$refs.handler
      handler.$on('dragstart', function() {
        // save the width before the drag
        _this.prevWidth = _this.leftWidth

        _this.offset = { x: 0, y: 0 }
      })

      handler.$on('drag', function(offset) {
        // update the width by the drag offset
        _this.leftWidth = _this.prevWidth + offset.x

        _this.offset = offset
      })
    })
  },
		
  components: {
  	handler: Handler
  }
})