refactor: Refactor some jsx files to vue files

feat: add global hooks to emulate sort of an event bus between components
* global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient

examples/router.ts

@@ -3,19 +3,19 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 export const routes = [
   {
     path: '/basic',
-    component: () => import('./Basic')
+    component: () => import('./Basic/Basic.vue')
   },
   {
     path: '/custom-connectionline',
-    component: () => import('./CustomConnectionLine')
+    component: () => import('./CustomConnectionLine/CustomConnectionLine.vue')
   },
   {
     path: '/custom-node',
-    component: () => import('./CustomNode')
+    component: () => import('./CustomNode/CustomNode.vue')
   },
   {
     path: '/drag-n-drop',
-    component: () => import('./DragNDrop')
+    component: () => import('./DragNDrop/DnD.vue')
   }
 ];