The solution may just be to re-implement your Diagram component(s) to use the new Composition API.
Could you please share with me any example if you have ??
I just gave you a sample that uses an SFC using the Composition API.
You are talking about the sample which you shared with me over an email?
Yes, in a ZIP file.
Hi,I convert the javascript proxy into array of object. But still getting the same error.
Here , i have created local variable and convert this proxy variable into array but still getting same issue
const nod = this.callGraph.nodeDataArray;
const rawNodeDataArray = toRaw(nod);
const link = this.callGraph.linkDataArray;
const rawLinkDataArray = toRaw(link);
this.myDiagram.model = $(go.GraphLinksModel, {
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: rawNodeDataArray,
linkDataArray: rawLinkDataArray,
});
I suggest that you first figure out those first exception(s) before worrying about that internal Vue error.
Can you tell me how i can define diagram variable as non-reactive??
I have shared with you code above.
All references to instances of Diagram, Node, Link, etc must be non-reactive. It is important that no data have references to any diagram objects.
In the code I gave you:
const diagram = ref(null)
onMounted(function() {
const $ = go.GraphObject.make;
const myDiagram =
new go.Diagram(diagram.value, . . .);
myDiagram.nodeTemplate = . . .
<template>
<div ref="diagram" class="goDiagram"></div>
</template>
the “myDiagram” variable is just a regular JavaScript variable with a regular reference to an instance of a Diagram.