How to make two divs resizable only by width in vuejs - vue.js

Question

I want to create two divs and make them re-sizable with respect to each others width in VueJS
$(function() {
var A = parseInt($('#A').width(), 10),
B = parseInt($('#B').width(), 10),
Z = parseInt($('#Z').width(), 10),
minw = parseInt((A + B + Z) * 10 / 100, 10),
offset = $('#container').offset(),
splitter = function(event, ui) {
var aw = parseInt(ui.position.left),
bw = A + B - aw;
//set widths and information...
$('#A').css({
width: aw
}).children().text(aw);
$('#B').css({
width: bw
}).children().text(bw);
};
$('#Z').draggable({
axis: 'x',
containment: [
offset.left + minw,
offset.top,
offset.left + A + B - minw,
offset.top + $('#container').height()
],
drag: splitter
});
//information...
$('#width').text(A + B + Z);
$('#A div').text(A);
$('#B div').text(B);
});
#container {
width: 90%;
height: 100px;
margin: 0 auto;
position: relative;
}
#A,
#B,
#Z {
position: absolute;
top: 0;
height: 100%;
}
#A {
left: 0;
width: 39%;
background-color: #ccffcc;
}
#B {
right: 0;
width: 59%;
background-color: #ccccff;
}
#Z {
left: 39%;
width: 2%;
background-color: #cc0000;
cursor: move;
}
#A div,
#B div {
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-align: center;
}
#info {
text-align: center;
line-height: 2em;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id='info'>container width : <span id='width'></span></div>
<div id='container'>
<div id='A'>
<div>a</div>
</div>
<div id='B'>
<div>b</div>
</div>
<div id='Z'></div>
</div>

Answer 1

You are mixing Vue with jQuery, so when your jQuery code runs the Vue app might not be ready.
A solution could be to wrap the draggable library in a <Draggable> component and use refs to access the DOM nodes from the mounted hook in the Vue component.