This is a Vue.js sample. For a Vue 3 sample, clone the GitHub repository: Vue 3 sample using GoJS called gojs-vue-basic.

The GoJS Diagram is held in a "diagram" component, and only exposes a small fraction of the functionality of Diagram. That includes the "modelData" property, to initialize the Diagram to show a model, and the "diagram" property, to get access to the Diagram.

That component also raises two events: "model-changed" corresponding to Model.addChangedListener, and "changed-selection" for the "ChangedSelection" DiagramEvent.

That component also supports two different ways of modifying the diagram: access to the Model via the "model" method so that code can call Model methods such as Model.setDataProperty, and an "updateDiagramFromData" method. The latter permits data changes without calling Model methods to notify Diagrams showing the model, but at the cost of not being able to support undo and redo.