Resize div in VueJS without jQuery

App.vue

<template>
  <div id="app">
    <div class="lateral-block" 
      :style="{width: widthLateral+'px'}">
      <div class="lateral">
      </div>
      <div class="gutter-vertical" id="gutterVertical"></div>
    </div>
    

    <div class="editor-block">
      <div class="editor">

      </div>
      <div class="terminal" id="terminal" 
        :style="{height: heightTerminal+'px'}">

      </div>
      <div class="gutter" id="gutterHorizontal"></div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      redimencionando: {
        terminal: false,
        lateral: false
      },
      heightTerminal: 120,
      widthLateral: 120
    }
  },
  mounted() {
    let gerl = document.getElementById('app');
    let gutH = document.getElementById('gutterHorizontal');
    let gutV = document.getElementById('gutterVertical');

    gutH.addEventListener('mousedown', (e) => {
      this.redimencionando.terminal = true;
    });

    gutV.addEventListener('mousedown', (e) => {
      this.redimencionando.lateral = true;
    });

    gerl.addEventListener('mouseup', (e) => {
      this.redimencionando.terminal = false;
      this.redimencionando.lateral = false;
    });

    gerl.addEventListener('mousemove', (e) => {
      if (this.redimencionando.terminal) {
        this.heightTerminal = e.pageY - 10;
      }

      if (this.redimencionando.lateral) {
        this.widthLateral = e.pageX - 10;
      }
    });
  }
}
</script>

<style>
#app {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 98%;
  height: 99%;
  position: fixed;
}

.lateral-block {
  display: inline-flex;
  width: 20%;
  height: 98%;
}

.lateral {
  background-color: aqua;
  width: 100%;
  height: 100%;
}

.editor-block {
  flex: 1;
  height: 98%;
  display: flex;
  flex-direction: column;
}

.editor {
  flex: 1;
  order: 1;
  background-color: blue;
  width: 100%;
}

.terminal {
  background-color: red;
  width: 100%;
}

.gutter {
  height: 5px;
  cursor: row-resize;
  background: #2d333b;
}

.gutter-vertical {
  width: 5px;
  cursor: col-resize;
  background: #2d333b;
}
</style>