SOURCE

new Vue({
    el: '#app',
    data() {
    return {
      letfDom: null,
      clientStartX: 0
    };
  },
  mounted() {
    this.letfDom = this.$refs.letfDom;
    let moveDom = this.$refs.moveDom;
 
    moveDom.onmousedown = e => {
      this.clientStartX = e.clientX;
      e.preventDefault();
 
      document.onmousemove = e => {
        this.moveHandle(e.clientX, this.letfDom);
      };
 
      document.onmouseup = e => {
        document.onmouseup = null;
        document.onmousemove = null;
      };
    };
  },
  methods: {
    moveHandle(nowClientX, letfDom) {
      let computedX = nowClientX - this.clientStartX;
      let leftBoxWidth = parseInt(letfDom.style.width);
      let changeWidth = leftBoxWidth + computedX;
 
      if (changeWidth < 280) {
        changeWidth = 280;
      }
 
      if (changeWidth > 400) {
        changeWidth = 400;
      }
 
      letfDom.style.width = changeWidth + "px";
 
      this.clientStartX = nowClientX;
    }
  }

})

<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/iview/dist/iview.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue-form-maker/dist/vue-form-maker.js">
</script>

<div id="app">
  <div class="wrap">
    <div class="lf" ref="letfDom" style="width: 280px;">
      <div class="touch-div" ref="moveDom">
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="rt">
    </div>
  </div>
</div>

.wrap .lf .touch-div {
  position: absolute;
  top: 0;
  height: 100%;
  left: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: col-resize;
}
 
.wrap .lf .touch-div span {
  width: 2px;
  background: #bbb;
  margin: 0 2px;
  height: 15px;
}