Move and Resize etc. events not firing

[abulka]

Move and Resize events are not firing. I see nothing appear in the console. I must be doing something wrong?

I am using the new event names as per the release notes. E.g. @noc-move="handleMove" etc.

<script setup lang="ts">
import { ref } from 'vue'
import '@/assets/styles-andy.css'

const layout = ref([
  { h: 2, id: 0, w: 2, x: 0, y: 0 },
  { h: 2, id: 1, w: 2, x: 2, y: 0 },
  { h: 2, id: 2, w: 2, x: 4, y: 0 },
  { h: 2, id: 3, w: 2, x: 0, y: 2 },
  { h: 2, id: 4, w: 2, x: 2, y: 2 },
  { h: 2, id: 5, w: 2, x: 4, y: 2 },
  { h: 2, id: 6, w: 2, x: 0, y: 4 },
  { h: 2, id: 7, w: 2, x: 2, y: 4 },
  { h: 2, id: 8, w: 2, x: 4, y: 4 },
  { h: 2, id: 9, w: 2, x: 0, y: 6 },
  { h: 2, id: 10, w: 2, x: 2, y: 6 },
  { h: 2, id: 11, w: 2, x: 4, y: 6 }
])

function handleMove (item, x, y) {
  console.log(`HIHIHI`)
  item.x = x
  item.y = y
  console.log(`${item.id} moved to [${x}, ${y}]`)
}

function handleMoveEnd (item) {
  console.log(`${item.id} move end`)
}

function handleResize (item, newH, newW) {
  item.h = newH
  item.w = newW
  console.log(`${item.id} resized to [${newH}, ${newW}]`)
}

</script>

<template>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    @noc-resize="handleResize"
    @noc-move="handleMove"
    @noc-move-end="handleMoveEnd"
  >
    <template #item="{ item }">
      {{ item.id }}
    </template>
  </grid-layout>
</template>

my package.json is

{
  "name": "vue3-gridlayout-2024",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@noction/vue-draggable-grid": "^1.11.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.9.3",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitest/eslint-plugin": "1.1.10",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.1.3",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "jsdom": "^25.0.1",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.3.3",
    "typescript": "~5.6.3",
    "vite": "^6.0.1",
    "vite-plugin-vue-devtools": "^7.6.5",
    "vitest": "^2.1.5",
    "vue-tsc": "^2.1.10"
  }
}

Not sure what the parameters are to the handlers, the npm doco says payload: MovePayload but that is not defined anywhere in the doco. Still, the event should fire regardless.