Vuetify grid having issues with resizing the grid

Question

I am having issues with the grid system, the widget has this resizing which is not on the edge of the grid

Also, when resizing the widget, it would overlap with other widgets as described in the picture

Can you help me figure it out and how to resize it in a way that it doesn't overlap with other widgets

export default {
  components: { DashboardCard, GenericMainDataTypeWidget, GenericResourceCategoryWidget,  SituationDataTypeWidget},
  data() {
    return {
      selectedResource: {},
      resourceDetailVisible: false,
      layout: [
        {
          componentName: 'GenericResourceCategoryWidget',
          resourceCategory: 'NETWORK',
          title: 'Network Awareness', // can be computed from resource category
          x: 0,
          y: 0,
          w: 4,
          h: 4.2,
          i: '1',
        },
        
          draggable: true,
      resizable: true,
      preventCollision: true,
      colNum: 12,
      index: 0,
    };
    
    
    

<style scoped>
.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
/*************************************/
.remove {
  position: absolute;
  right: 2px;
  top: 0;
  cursor: pointer;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* margin: auto; */
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

.draggable {
  touch-action: none;
}
.abs-situation {
  position: absolute;
  top: 0px;
  height: 100%;
  right: 0;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <client-only>
          <grid-layout
            :layout.sync="layout"
            :col-num="colNum"
            :max-rows="2"
            :is-draggable="draggable"
            :is-resizable="resizable"
            :prevent-collision="preventCollision"
            :vertical-compact="true"

          >
            <div v-for="(item, index) in layout" :key="item.i">
              <grid-item class="draggable" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
                <DashboardCard :title="layout[index].title" @deleteAction="deleteWidget(index)">
                  <div
                    :is="layout[index].componentName"
                    :entityTableName="layout[index].tableName"
                    @resourceClicked="openResourceDetailDialog"
                    :category="layout[index].resourceCategory"
                  ></div>
                </DashboardCard>
              </grid-item>
            </div>
          </grid-layout>
        </client-only>
      </v-col>
        <ResourceDetail
          class="abs-situation"
          v-if="resourceDetailVisible"
          :detailItemProp="selectedResource"
          @closeClicked="closeResourceDetailDialog"
        />
    </v-row>
  </v-container>
</template>