Inside the onMounted() and grid.on("dragstop" functions of the demo vue3js.html there are several comments saying that the value of this will be the vue.js instance. The value of this is actually undefined at these points.

Your environment

• gridstack.js 4.2.6
• Edge / Chromium Version 92.0.902.67 on Mac Mojave

Steps to reproduce

Add a couple of diagnostic lines in demo/vue3js.html printing the value of this e.g.

onMounted(() => {
    console.log('onMounted this is', this)  // <------
    grid = GridStack.init({
        float: true,
        cellHeight: "70px",
        minRow: 1,
    });

    // Use an arrow function so that `this` is bound to the Vue instance. Alternatively, use a custom Vue directive on the `.grid-stack` container element: https://vuejs.org/v2/guide/custom-directive.html
    grid.on("dragstop", (event, element) => {
        console.log('dragstop this is', this)  // <------
        const node = element.gridstackNode;
        // `this` will only access your Vue instance if you used an arrow function, otherwise `this` binds to window scope. see https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
        info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
    });
});

Run the demo and notice the console says this is undefined in both cases.

The comments in the demo are thus incorrect.

Expected behavior

Ideally this is the vue.js instance. Interestingly, the vuejs 2 version of the demo works ok and this is correctly the vue.js instance.

Actual behavior

I'm actually not sure what vue.js 3 is supposed to do? If vue.js 3 has changed, then the comments should be changed accordingly.

The deeper problem is how do we call methods of the vue instance (e.g. in the vuejs methods section) from inside gridstack.js event handlers, if we can't get access to the vue instance?