diff --git a/src/components/grid-item.vue b/src/components/grid-item.vue
index 267156e..845e37b 100644
--- a/src/components/grid-item.vue
+++ b/src/components/grid-item.vue
@@ -232,7 +232,7 @@ onMounted(() => {
   }
   state.rowHeight = layout.rowHeight
   state.containerWidth = layout.width !== null ? layout.width : 100
-  state.margin = layout.margin !== undefined ? layout.margin : [10, 10]
+  state.margin = layout.margin !== undefined ? layout.margin.map(Number) : [10, 10]
   state.maxRows = layout.maxRows
 
   if (isNull(props.isDraggable)) {
@@ -379,17 +379,17 @@ watch(renderRtl, () => {
   nextTickOnce(tryMakeResizable)
   nextTickOnce(createStyle)
 })
-watch(
-  () => layout.margin,
-  value => {
-    if (!value || (value[0] === state.margin[0] && value[1] === state.margin[1])) {
-      return
-    }
-    state.margin = value.map(Number)
-    nextTickOnce(createStyle)
-    nextTickOnce(emitContainerResized)
+watch([() => layout.margin, () => layout.margin[0], () => layout.margin[1]], () => {
+  const margin = layout.margin
+
+  if (!margin || (margin[0] === state.margin[0] && margin[1] === state.margin[1])) {
+    return
   }
-)
+
+  state.margin = margin.map(Number)
+  nextTickOnce(createStyle)
+  nextTickOnce(emitContainerResized)
+})
 
 function createStyle() {
   if (props.x + props.w > state.cols) {
@@ -658,9 +658,9 @@ function calcPosition(x: number, y: number, w: number, h: number) {
     out = {
       right: Math.round(colWidth * x + (x + 1) * state.margin[0]),
       top: Math.round(state.rowHeight * y + (y + 1) * state.margin[1]),
-      // 0 * Infinity === NaN, which causes problems with resize constriants;
+      // 0 * Infinity === NaN, which causes problems with resize constraints;
       // Fix this if it occurs.
-      // Note we do it here rather than later because Math.round(Infinity) causes deopt
+      // Note we do it here rather than later because Math.round(Infinity) causes depot
       width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * state.margin[0]),
       height:
         h === Infinity ? h : Math.round(state.rowHeight * h + Math.max(0, h - 1) * state.margin[1])
@@ -669,9 +669,9 @@ function calcPosition(x: number, y: number, w: number, h: number) {
     out = {
       left: Math.round(colWidth * x + (x + 1) * state.margin[0]),
       top: Math.round(state.rowHeight * y + (y + 1) * state.margin[1]),
-      // 0 * Infinity === NaN, which causes problems with resize constriants;
+      // 0 * Infinity === NaN, which causes problems with resize constraints;
       // Fix this if it occurs.
-      // Note we do it here rather than later because Math.round(Infinity) causes deopt
+      // Note we do it here rather than later because Math.round(Infinity) causes depot
       width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * state.margin[0]),
       height:
         h === Infinity ? h : Math.round(state.rowHeight * h + Math.max(0, h - 1) * state.margin[1])
@@ -713,7 +713,7 @@ function calcColWidth() {
 }
 
 function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number) {
-  // 0 * Infinity === NaN, which causes problems with resize contraints
+  // 0 * Infinity === NaN, which causes problems with resize constraints
   if (!Number.isFinite(gridUnits)) return gridUnits
   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx)
 }
diff --git a/src/components/grid-layout.vue b/src/components/grid-layout.vue
index 28390b4..c539a0d 100644
--- a/src/components/grid-layout.vue
+++ b/src/components/grid-layout.vue
@@ -211,13 +211,13 @@ function dragEventHandler(
 
 watch(
   () => state.width,
-  (newval, oldval) => {
+  (newVal, oldVal) => {
     nextTick(() => {
-      emitter.emit('updateWidth', newval)
-      if (oldval === null) {
+      emitter.emit('updateWidth', newVal)
+      if (oldVal === null) {
         /*
-        If oldval == null is when the width has never been
-        set before. That only occurs when mouting is
+        If oldVal == null is when the width has never been
+        set before. That only occurs when mounting is
         finished, and onWindowResize has been called and
         this.width has been changed the first time after it
         got set to null in the constructor. It is now time
@@ -233,7 +233,7 @@ watch(
         item-layout-ready (for the GridItem-s).
 
         This way any client event handlers can reliably
-        invistigate stable sizes of GridItem-s.
+        investigate stable sizes of GridItem-s.
       */
         nextTick(() => {
           emit('layout-ready', currentLayout.value)
@@ -302,7 +302,7 @@ watch(
     emitter.emit('setMaxRows', value)
   }
 )
-watch(() => props.margin, updateHeight)
+watch([() => props.margin, () => props.margin[1]], updateHeight)
 
 provide(
   LAYOUT_KEY,
@@ -372,8 +372,8 @@ function onWindowResize() {
 function containerHeight() {
   if (!props.autoSize) return
 
-  const containerHeight =
-    bottom(currentLayout.value) * (props.rowHeight + props.margin[1]) + props.margin[1] + 'px'
+  const marginY = parseFloat(props.margin[1] as any)
+  const containerHeight = bottom(currentLayout.value) * (props.rowHeight + marginY) + marginY + 'px'
   return containerHeight
 }