Изменяемый размер разделенных DIVs Vue.js

Question

Здравствуйте, разработчики / программисты!

Я только начал разрабатывать веб-приложение (Vue.js) для своей компании в течение 1-2 месяцев.
Поэтому мои знания и опыт в области HTML, CSS и другихJavascript довольно мелкий.

Я создал разделенные DIVs с изменяемым размером, и он прекрасно работает, как я и хотел.
Однако я хотел бы знать, является ли мой код хорошим кодом или плохой код .
Ниже приведен фрагмент моего кода. Демонстрационная версия: https://codepen.io/aziziaziz/pen/yLBeRxQ

var dividerRef = '';
var currentDivider = null;

var leftDivider = null;
var rightDivider = null;
var leftRightDivider = null;

var topLeft = null;
var topRight = null;
var bottomLeft = null;
var bottomRight = null;

var app = new Vue({
  el: '#app',
  methods: 
  {
		dividerDragStart: function(e) {
			e.dataTransfer.setDragImage(new Image, 0, 0);
		},
    dividerDrag: function(e) {
			if (dividerRef == 'lrDivider') {
				currentDivider.style.left = e.clientX + 'px';

				leftDivider.style.width = (e.clientX + 2) + 'px';

				rightDivider.style.left = (e.clientX) + 'px';
				rightDivider.style.width = (window.innerWidth - e.clientX + 2) + 'px';

				topLeft.style.width = e.clientX + 'px';
				bottomLeft.style.width = e.clientX + 'px';

				topRight.style.left = e.clientX + 'px';
				topRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
				bottomRight.style.left = e.clientX + 'px';
				bottomRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
			} else if (dividerRef == 'rtbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topRight.style.height = (e.clientY) + 'px'

				bottomRight.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomRight.style.top = (e.clientY) + 'px';
			} else if (dividerRef == 'ltbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topLeft.style.height = (e.clientY) + 'px'

				bottomLeft.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomLeft.style.top = (e.clientY) + 'px';
			}
		},
		dividerMouseDown: function(name) {
			dividerRef = name;
			currentDivider = this.$refs[dividerRef];
		},
		dividerDragEnd: function(e) {
			if (dividerRef == 'lrDivider') {
				currentDivider.style.left = e.clientX + 'px';
				leftDivider.style.width = (e.clientX + 2) + 'px';

				rightDivider.style.left = (e.clientX) + 'px';
				rightDivider.style.width = (window.innerWidth - e.clientX + 2) + 'px';

				topLeft.style.width = e.clientX + 'px';
				bottomLeft.style.width = e.clientX + 'px';

				topRight.style.left = e.clientX + 'px';
				topRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
				bottomRight.style.left = e.clientX + 'px';
				bottomRight.style.width = (window.innerWidth - e.clientX + 2) + 'px';
			} else if (dividerRef == 'rtbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topRight.style.height = (e.clientY) + 'px'

				bottomRight.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomRight.style.top = (e.clientY) + 'px';
			} else if (dividerRef == 'ltbDivider') {
				currentDivider.style.top = (e.clientY) + 'px';

				topLeft.style.height = (e.clientY) + 'px'

				bottomLeft.style.height = (window.innerHeight - e.clientY) + 'px';
				bottomLeft.style.top = (e.clientY) + 'px';
			}

			dividerRef = '';
			currentDivider = null;
		}
  },
  mounted() {
    topLeft = this.$refs.topLeft;
    topRight = this.$refs.topRight;
    bottomLeft = this.$refs.bottomLeft;
    bottomRight = this.$refs.bottomRight;

    var heightHalf = (window.innerHeight - 80) / 2;
		var widthHalf = window.innerWidth / 2;
		
		leftDivider = this.$refs.ltbDivider;
		rightDivider = this.$refs.rtbDivider;
		leftRightDivider = this.$refs.lrDivider;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div class="top-left" ref="topLeft">
      <div class="text-area">
        <h3>Resize me using the black bars</h3>
      </div>
    </div>
    <div class="top-right" ref="topRight">
      <div class="text-area">
        <h3>Resize me using the black bars</h3>
      </div>
    </div>
    <div class="bottom-left" ref="bottomLeft">
      <div class="text-area">
        <h3>Resize me using the black bars</h3>
      </div>
    </div>
    <div class="bottom-right" ref="bottomRight">
      <div class="text-area">
        <h3>Resize me using the black bars</h3>
      </div>
    </div>

    <div class="left-right divider" ref="lrDivider" @mousedown="dividerMouseDown('lrDivider')" draggable="true"
        @drag="dividerDrag" @dragend="dividerDragEnd" @dragstart="dividerDragStart"></div>
    <div class="right-top-bottom divider" ref="rtbDivider" @mousedown="dividerMouseDown('rtbDivider')" draggable="true"
        @drag="dividerDrag" @dragend="dividerDragEnd" @dragstart="dividerDragStart"></div>
    <div class="left-top-bottom divider" ref="ltbDivider" @mousedown="dividerMouseDown('ltbDivider')" draggable="true"
        @drag="dividerDrag" @dragend="dividerDragEnd" @dragstart="dividerDragStart"></div>
  </div>
</div>

Поэтому, если кто-либо из веб-мастеров хотел бы дать отзыв, комментарии или мнения по поводу моего кода, был бы очень признателен.

I 'Извините, если это не совсем вопрос, но я действительно хочу получить отзывы о моем коде, и я не знаю, где еще сослаться, кроме здесь. Извините, ребята.

Большое вам спасибо за ваше время.
Ценю это.