docs: move examples into nodes and edges dir

docs/src/examples/nodes/index.md

@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Custom Node
+
+One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
+
+You can display any content and functionality inside a custom node. More documentation about how to set
+up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="customNode"></Repl>
+    </Suspense>
+  </client-only>
+</div>

docs/src/examples/nodes/nesting.md

@@ -0,0 +1,20 @@
+---
+pageClass: examples
+
+---
+
+# Nested Nodes
+
+Another key feature is nested nodes (or even nested flows).
+
+You can define parents of a node, which are then nested inside that node. 
+You can also define the boundaries of a node, i.e. if the node can be dragged outside it's parent or if it's contained to the parent 
+or even let Vue Flow extend the area of a node to fit all it's children.
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="nested"></Repl>
+    </Suspense>
+  </client-only>
+</div>

docs/src/examples/nodes/update-node.md

@@ -0,0 +1,22 @@
+---
+pageClass: examples
+
+---
+
+# Update Node
+
+Updating internal node data is simple.
+After initializing your elements and parsing them into either `GraphNode` or `GraphEdge`
+Vue Flow will emit the changes back into your initial `ref`.
+
+That means you can manipulate any property of your original nodes, and it will trigger changes in the graph.
+
+You can of course also access the nodes directly from the state and change their properties from there.
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="updateNode"></Repl>
+    </Suspense>
+  </client-only>
+</div>