Vuetify Navigation Drawer Drag To Resize - vue.js

Question

So I have gotten it to where the the 'drag to resize' works - it just feels a little laggy... does anyone know why this may be, and how to fix it?
I have tried forcing a refresh using vm.$forceUpdate() but that did not seem to do anything..
The CodePen can be found here.
EDIT: Added demo code working solution to this question/post. This way if something happens to the CodePen, we still have working demo code.
new Vue({
el: "#app",
data: () => {
return {
navigation: {
shown: false,
width: 200,
borderSize: 3
}
};
},
computed: {
direction() {
return this.navigation.shown === false ? "Open" : "Closed";
}
},
methods: {
setBorderWidth() {
let i = this.$refs.drawer.$el.querySelector(
".v-navigation-drawer__border"
);
i.style.width = this.navigation.borderSize + "px";
i.style.cursor = "ew-resize";
i.style.backgroundColor = "red";
},
setEvents() {
const minSize = this.navigation.borderSize;
const el = this.$refs.drawer.$el;
const drawerBorder = el.querySelector(".v-navigation-drawer__border");
const vm = this;
const direction = el.classList.contains("v-navigation-drawer--right") ?
"right" :
"left";
function resize(e) {
document.body.style.cursor = "ew-resize";
let f =
direction === "right" ?
document.body.scrollWidth - e.clientX :
e.clientX;
el.style.width = f + "px";
}
drawerBorder.addEventListener(
"mousedown",
(e) => {
if (e.offsetX < minSize) {
el.style.transition = "initial";
document.addEventListener("mousemove", resize, false);
}
},
false
);
document.addEventListener(
"mouseup",
() => {
el.style.transition = "";
this.navigation.width = el.style.width;
document.body.style.cursor = "";
document.removeEventListener("mousemove", resize, false);
},
false
);
}
},
mounted() {
this.setBorderWidth();
this.setEvents();
}
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.6/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.6/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-navigation-drawer ref="drawer" app right hide-overlay :width="navigation.width" v-model="navigation.shown">
<v-toolbar color="primary">
<v-toolbar-title class="headline text-uppercase">
<span>t a</span><span class="font-weight-light"> b s </span>
</v-toolbar-title>
</v-toolbar>
<v-tabs>
<v-tab v-for="n in 3" :key="n">
Item {{ n }}
</v-tab>
<v-tab-item v-for="n in 3" :key="n">
<v-card flat>
<v-card-text>Content for tab {{ n }} would go here</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-navigation-drawer>
<v-container>
<v-layout justify-center>
<v-btn #click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
</v-layout>
<v-layout justify-center>
<p>Once the navigation drawer is opened, drag it's border to resize (highlited in red)</p>
</v-layout>
</v-container>
</v-app>
</div>

Answer 1

Thats because of transition effect on navigation drawer. set transition to initial at mouse down, then release that on mouse up.
at mousedown add
el.style.transition ='initial';
at mouseup add
el.style.transition ='';
Codepen : https://codepen.io/dagalti/pen/ywRNYx