Диалог vuetify vue js и jquery

Я пытаюсь сделать диалог vuetify(библиотека vue js) растягиваемым с помощью resize jquery. Я столкнулся с рядом проблем: 1) jquery расширяет диалог по всем 4 направлениям(когда тянем вправо, ресайзится ещё и влево, также вниз-вверх.), а мне нужно только в два(вниз и вправо) 2) при закрытии и повторном открытии диалога область для ресайза пропадает.

Вот код:

<template>
 <v-dialog v-model="dialog" persistent width="665px" min-height="530px"
            style="overflow: hidden; min-height: 540px">
    <div class="resizeDialog" style="z-index: 9999999; height:100%">
     <v-btn @click="closeDialog"> Close<v-btn>
  </div>
 </v-dialog>
</template>
<script>
 export default {
   name:"SomeDialog",
   data(){
     return {
        dialog: false,
        staticLeft: 0,
        staticTop: 0
       }
     }
    ,
    methods:{
       close(){
         this.dialog = false
       },
       openDialog(){
         this.dialog = true
         setTimeout(()=>{
         this.makeDialogResizable()
         })
       },
       makeDialogResizable(){
          $('.resizeDialog').parent('.v-dialog').resizable({
          minHeight: 580,
          minWidth: 621,
          handles: 'all',
          // Вот тут была попытка сделать так, чтобы диалог расширялся только в две, 
          //а не в 4 стороны, но диалог тут очень сильно скачет по экрану
          //видимо из-за того, что jquery пытается заменить координаты top и left 
          start: function (event, ui) {
            this.staticTop = $('.resizeDialog').parent('.v-dialog').offset().top
            this.staticLeft = $('.resizeDialog').parent('.v-dialog').offset().left
            );

          },
          stop: function (event, ui) {
          },
          resize: function (event, ui) {
            $('.resizeDialog').parent('.v-dialog').offset(
                {
                  top: this.staticTop
                  ,
                  left: this.staticLeft
                }
                );
              }
             }
           )
         },
       }
    }
</script>

Использование компонента:

<template>
  <v-btn @click = "openDialog">Open</v-btn> 
  <SomeDialog ref="dialog"/>
</template>
<script>
   import SomeDialog from "./components/SomeDialog"
  export default {
    methods : {
       openDialog(){
        this.$refs.dialog.openDialog()
       }
     }
  }
</script>

Как мне решить эти проблемы? Что я делаю не так? Заранее спасибо за ответ