diff --git a/.gitignore b/.gitignore
index dcf0ae7..742dab1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,6 @@ Thumbs.db
 
 *.tgz
 packages/**/angular/dist
+
+.nx/cache
+.nx/workspace-data
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 413ca14..342760a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,6 @@
 /dist
 /coverage
 native-src
+
+/.nx/cache
+/.nx/workspace-data
\ No newline at end of file
diff --git a/nx.json b/nx.json
index 0d94756..7fd1e92 100644
--- a/nx.json
+++ b/nx.json
@@ -1,20 +1,12 @@
 {
-  "npmScope": "",
-  "affected": {
-    "defaultBase": "master"
-  },
   "workspaceLayout": {
     "appsDir": "apps",
     "libsDir": "packages"
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "build.all", "lint", "test", "e2e"],
-        "runtimeCacheInputs": ["node -v"],
-        "parallel": 1,
-        "useDaemonProcess": false
+        "runtimeCacheInputs": ["node -v"]
       }
     }
   },
@@ -26,10 +18,25 @@
   },
   "targetDefaults": {
     "build": {
-      "inputs": ["production", "^production"]
+      "inputs": ["production", "^production"],
+      "cache": true
     },
     "lint": {
-      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
+      "cache": true
+    },
+    "build.all": {
+      "cache": true
+    },
+    "test": {
+      "cache": true
+    },
+    "e2e": {
+      "cache": true
     }
-  }
+  },
+  "useDaemonProcess": false,
+  "parallel": 1,
+  "defaultBase": "master",
+  "useLegacyCache": true
 }
diff --git a/package.json b/package.json
index 30d1b14..509af95 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
     "remove-package": "nx g @nativescript/plugin-tools:remove-package",
     "add-demo": "nx g @nativescript/plugin-tools:add-demo",
     "ts-vue": "cd packages/vue && npx tsc --watch",
-    "build:all": "nx run-many --target=build.all --all",
+    "build:all": "nx run-many --target=build.all --all --verbose --skip-nx-cache && node scripts/copy-packages.ts",
+    "postbuild": "node scripts/copy-packages.ts",
+    "build:vue": "nx run-many --target=vue  ",
     "demo:vue:android": "npx nx run demo-vue:android",
     "demo:vue:ios": "npx nx run demo-vue:ios",
     "docs:dev": "vitepress dev packages/vue",
@@ -28,20 +30,20 @@
   "private": true,
   "devDependencies": {
     "@nativescript-use/vue": "^0.0.5",
-    "@nativescript/core": "~8.5.0",
-    "@nativescript/plugin-tools": "5.1.0",
+    "@nativescript/core": "~8.9.0",
+    "@nativescript/plugin-tools": "5.5.1",
     "@nativescript/tailwind": "^2.0.1",
-    "@nativescript/types": "~8.5.0",
-    "@nativescript/webpack": "^5.0.15",
+    "@nativescript/types": "~8.9.0",
+    "@nativescript/webpack": "^5.0.23",
     "autoprefixer": "^10.4.14",
     "husky": "^8.0.0",
     "nativescript-vue": "3.0.0-beta.8",
-    "ng-packagr": "^15.0.0",
+    "ng-packagr": "^19.2.0",
     "patch-package": "~6.4.0",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
-    "typescript": "^5.4.5",
-    "vitepress": "^1.0.0-rc.40"
+    "typescript": "~5.6.0",
+    "vitepress": "^1.6.3"
   },
   "lint-staged": {
     "**/*.{js,ts,scss,json,html}": [
diff --git a/packages/change-icon/project.json b/packages/change-icon/project.json
index 1f3e1f2..b64afe9 100644
--- a/packages/change-icon/project.json
+++ b/packages/change-icon/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/change-icon",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/change-icon",
         "tsConfig": "packages/change-icon/tsconfig.json",
         "packageJson": "packages/change-icon/package.json",
         "main": "packages/change-icon/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/change-icon/*.md",
           "packages/change-icon/index.d.ts",
diff --git a/packages/nativescript-clipboard/project.json b/packages/nativescript-clipboard/project.json
index 3186adc..24a3abe 100644
--- a/packages/nativescript-clipboard/project.json
+++ b/packages/nativescript-clipboard/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-clipboard",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-clipboard",
         "tsConfig": "packages/nativescript-clipboard/tsconfig.json",
         "packageJson": "packages/nativescript-clipboard/package.json",
         "main": "packages/nativescript-clipboard/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-clipboard/*.md",
           "packages/nativescript-clipboard/index.d.ts",
@@ -32,14 +33,10 @@
     "build.all": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "node tools/scripts/build-finish.ts nativescript-clipboard"
-        ],
+        "commands": ["node tools/scripts/build-finish.ts nativescript-clipboard"],
         "parallel": false
       },
-      "outputs": [
-        "dist/packages/nativescript-clipboard"
-      ],
+      "outputs": ["dist/packages/nativescript-clipboard"],
       "dependsOn": [
         {
           "target": "build.all",
@@ -54,18 +51,14 @@
     "focus": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "nx g @nativescript/plugin-tools:focus-packages nativescript-clipboard"
-        ],
+        "commands": ["nx g @nativescript/plugin-tools:focus-packages nativescript-clipboard"],
         "parallel": false
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
-          "packages/nativescript-clipboard/**/*.ts"
-        ]
+        "lintFilePatterns": ["packages/nativescript-clipboard/**/*.ts"]
       }
     }
   },
diff --git a/packages/nativescript-intersection-observer/project.json b/packages/nativescript-intersection-observer/project.json
index 9dca210..aa97506 100644
--- a/packages/nativescript-intersection-observer/project.json
+++ b/packages/nativescript-intersection-observer/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-intersection-observer",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-intersection-observer",
         "tsConfig": "packages/nativescript-intersection-observer/tsconfig.json",
         "packageJson": "packages/nativescript-intersection-observer/package.json",
         "main": "packages/nativescript-intersection-observer/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-intersection-observer/*.md",
           "packages/nativescript-intersection-observer/index.d.ts",
diff --git a/packages/nativescript-keyboard/project.json b/packages/nativescript-keyboard/project.json
index 40baaed..7c2158e 100644
--- a/packages/nativescript-keyboard/project.json
+++ b/packages/nativescript-keyboard/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-keyboard",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-keyboard",
         "tsConfig": "packages/nativescript-keyboard/tsconfig.json",
         "packageJson": "packages/nativescript-keyboard/package.json",
         "main": "packages/nativescript-keyboard/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-keyboard/*.md",
           "packages/nativescript-keyboard/index.d.ts",
@@ -32,14 +33,10 @@
     "build.all": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "node tools/scripts/build-finish.ts nativescript-keyboard"
-        ],
+        "commands": ["node tools/scripts/build-finish.ts nativescript-keyboard"],
         "parallel": false
       },
-      "outputs": [
-        "dist/packages/nativescript-keyboard"
-      ],
+      "outputs": ["dist/packages/nativescript-keyboard"],
       "dependsOn": [
         {
           "target": "build.all",
@@ -54,18 +51,14 @@
     "focus": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "nx g @nativescript/plugin-tools:focus-packages nativescript-keyboard"
-        ],
+        "commands": ["nx g @nativescript/plugin-tools:focus-packages nativescript-keyboard"],
         "parallel": false
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
-          "packages/nativescript-keyboard/**/*.ts"
-        ]
+        "lintFilePatterns": ["packages/nativescript-keyboard/**/*.ts"]
       }
     }
   },
diff --git a/packages/nativescript-localstorage/project.json b/packages/nativescript-localstorage/project.json
index 5ee55c7..7ca149b 100644
--- a/packages/nativescript-localstorage/project.json
+++ b/packages/nativescript-localstorage/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-localstorage",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-localstorage",
         "tsConfig": "packages/nativescript-localstorage/tsconfig.json",
         "packageJson": "packages/nativescript-localstorage/package.json",
         "main": "packages/nativescript-localstorage/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-localstorage/*.md",
           "packages/nativescript-localstorage/index.d.ts",
diff --git a/packages/nativescript-media-query/README.md b/packages/nativescript-media-query/README.md
index 87101b9..1dd009b 100644
--- a/packages/nativescript-media-query/README.md
+++ b/packages/nativescript-media-query/README.md
@@ -1,3 +1,6 @@
+# DEPRECATED. NativeScript introduced media queries in version 8.8. We've deprecated this package in favor of using @nativescript/core. Official documentation is available [here](https://docs.nativescript.org/guide/styling#media-queries-8-8).
+
+
 # @nativescript-use/nativescript-media-query
 
 ```javascript
diff --git a/packages/nativescript-media-query/index.ts b/packages/nativescript-media-query/index.ts
index 4f43037..c8c7878 100644
--- a/packages/nativescript-media-query/index.ts
+++ b/packages/nativescript-media-query/index.ts
@@ -1,5 +1,8 @@
 import { Screen, Application } from '@nativescript/core';
 
+/**
+ * @deprecated. NativeScript introduced media queries in version 8.8. We've deprecated this package in favor of using @nativescript/core. Official documentation is available [here](https://docs.nativescript.org/guide/styling#media-queries-8-8)
+ */
 export interface MediaQueryList {
   readonly matches: boolean;
   readonly media: string;
@@ -8,13 +11,22 @@ export interface MediaQueryList {
   removeListener(listener: MediaQueryListListener): void;
 }
 
+/**
+ * @deprecated. NativeScript introduced media queries in version 8.8. We've deprecated this package in favor of using @nativescript/core. Official documentation is available [here](https://docs.nativescript.org/guide/styling#media-queries-8-8)
+ */
 export type MediaQueryListListener = (mql: MediaQueryList) => void;
 
+/**
+ * @deprecated. NativeScript introduced media queries in version 8.8. We've deprecated this package in favor of using @nativescript/core. Official documentation is available [here](https://docs.nativescript.org/guide/styling#media-queries-8-8)
+ */
 export interface MediaQueryListEvent {
   readonly matches: boolean;
   readonly media: string;
 }
 
+/**
+ * @deprecated. NativeScript introduced media queries in version 8.8. We've deprecated this package in favor of using @nativescript/core. Official documentation is available [here](https://docs.nativescript.org/guide/styling#media-queries-8-8)
+ */
 export const matchMedia = (mediaQueryString: string) => {
   const factory = MediaQueryListFactory.getInstance();
   const mql = factory.create(mediaQueryString);
diff --git a/packages/nativescript-media-query/package.json b/packages/nativescript-media-query/package.json
index 6bf7721..9a73832 100644
--- a/packages/nativescript-media-query/package.json
+++ b/packages/nativescript-media-query/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript-use/nativescript-media-query",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Add a plugin description",
   "main": "index",
   "typings": "index.d.ts",
diff --git a/packages/nativescript-media-query/project.json b/packages/nativescript-media-query/project.json
index f2c8771..b4d9527 100644
--- a/packages/nativescript-media-query/project.json
+++ b/packages/nativescript-media-query/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-media-query",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-media-query",
         "tsConfig": "packages/nativescript-media-query/tsconfig.json",
         "packageJson": "packages/nativescript-media-query/package.json",
         "main": "packages/nativescript-media-query/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-media-query/*.md",
           "packages/nativescript-media-query/index.d.ts",
diff --git a/packages/nativescript-orientation/project.json b/packages/nativescript-orientation/project.json
index 61ad1c7..878872f 100644
--- a/packages/nativescript-orientation/project.json
+++ b/packages/nativescript-orientation/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-orientation",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-orientation",
         "tsConfig": "packages/nativescript-orientation/tsconfig.json",
         "packageJson": "packages/nativescript-orientation/package.json",
         "main": "packages/nativescript-orientation/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-orientation/*.md",
           "packages/nativescript-orientation/index.d.ts",
@@ -32,14 +33,10 @@
     "build.all": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "node tools/scripts/build-finish.ts nativescript-orientation"
-        ],
+        "commands": ["node tools/scripts/build-finish.ts nativescript-orientation"],
         "parallel": false
       },
-      "outputs": [
-        "dist/packages/nativescript-orientation"
-      ],
+      "outputs": ["dist/packages/nativescript-orientation"],
       "dependsOn": [
         {
           "target": "build.all",
@@ -54,18 +51,14 @@
     "focus": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "nx g @nativescript/plugin-tools:focus-packages nativescript-orientation"
-        ],
+        "commands": ["nx g @nativescript/plugin-tools:focus-packages nativescript-orientation"],
         "parallel": false
       }
     },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "options": {
-        "lintFilePatterns": [
-          "packages/nativescript-orientation/**/*.ts"
-        ]
+        "lintFilePatterns": ["packages/nativescript-orientation/**/*.ts"]
       }
     }
   },
diff --git a/packages/nativescript-task/project.json b/packages/nativescript-task/project.json
index 147e889..cf0550b 100644
--- a/packages/nativescript-task/project.json
+++ b/packages/nativescript-task/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/nativescript-task",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/nativescript-task",
         "tsConfig": "packages/nativescript-task/tsconfig.json",
         "packageJson": "packages/nativescript-task/package.json",
         "main": "packages/nativescript-task/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/nativescript-task/*.md",
           "packages/nativescript-task/index.d.ts",
diff --git a/packages/vue/nativescript.webpack.ts b/packages/vue/nativescript.webpack.ts
index 005b8ec..d21ca62 100644
--- a/packages/vue/nativescript.webpack.ts
+++ b/packages/vue/nativescript.webpack.ts
@@ -4,8 +4,4 @@ const webpack = require('@nativescript/webpack');
 module.exports = (env) => {
   const wepackTask = require('@nativescript-use/nativescript-task/nativescript.webpack.js');
   wepackTask(webpack);
-  webpack.chainWebpack((config) => {
-    //@ts-ignore
-    config.resolve.alias.set('vue-demi', require.resolve('vue-demi'));
-  });
 };
diff --git a/packages/vue/package.json b/packages/vue/package.json
index de694bb..d74f5b8 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nativescript-use/vue",
-  "version": "0.0.44",
+  "version": "0.0.51",
   "description": "Add a plugin description",
   "main": "index",
   "typings": "index.d.ts",
@@ -10,20 +10,17 @@
       "android": "6.0.0"
     }
   },
-  "scripts": {
-    "postinstall": "npx vue-demi-switch 3 nativescript-vue"
-  },
+  "scripts": {},
   "dependencies": {
     "@nativescript-use/nativescript-clipboard": "0.0.3",
+    "@nativescript-use/nativescript-intersection-observer": "0.0.1",
     "@nativescript-use/nativescript-keyboard": "0.0.1",
     "@nativescript-use/nativescript-localstorage": "0.0.1",
     "@nativescript-use/nativescript-media-query": "0.0.4",
     "@nativescript-use/nativescript-orientation": "0.0.3",
-    "@nativescript-use/nativescript-intersection-observer": "0.0.1",
     "@nativescript-use/nativescript-task": "^0.0.11",
-    "@vueuse/core": "^10.10.1"
+    "@vueuse/core": "^12.5.0"
   },
-  "peerDependencies": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/NativeScript-Use/NativeScript-Use.git"
diff --git a/packages/vue/project.json b/packages/vue/project.json
index 322e0a0..1b58fb4 100644
--- a/packages/vue/project.json
+++ b/packages/vue/project.json
@@ -5,12 +5,13 @@
   "sourceRoot": "packages/vue",
   "targets": {
     "build": {
-      "executor": "@nrwl/js:tsc",
+      "executor": "@nx/js:tsc",
       "options": {
         "outputPath": "dist/packages/vue",
         "tsConfig": "packages/vue/tsconfig.json",
         "packageJson": "packages/vue/package.json",
         "main": "packages/vue/index.d.ts",
+        "generatePackageJson": false,
         "assets": [
           "packages/vue/*.md",
           "packages/vue/index.d.ts",
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 2456eee..28ca8b1 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -1,4 +1,11 @@
 import { View } from '@nativescript/core';
-import { Ref } from 'nativescript-vue';
+import { Ref, ShallowRef } from 'nativescript-vue';
 
-export type ViewRef<T = View> = T | Ref<T | { nativeView?: T; $el?: { nativeView: T } }>;
+type NativeElement<T> = {
+  nativeView?: T;
+  $el?: {
+    nativeView: T;
+  };
+};
+
+export type ViewRef<T = View> = T | Ref<T | NativeElement<T>> | Readonly<ShallowRef<T | NativeElement<T>>>;
diff --git a/packages/vue/src/useColorMode/index.ts b/packages/vue/src/useColorMode/index.ts
index e1aedcf..89080b8 100644
--- a/packages/vue/src/useColorMode/index.ts
+++ b/packages/vue/src/useColorMode/index.ts
@@ -1,8 +1,8 @@
 import { Application, ApplicationSettings, CSSUtils, Frame } from '@nativescript/core';
-import { ref, Ref, watch, computed, onUnmounted, getCurrentInstance, readonly } from 'nativescript-vue';
+import { computed, getCurrentInstance, onUnmounted, readonly, ref, Ref, watch } from 'nativescript-vue';
+import { createGlobalState } from '../globalState';
 import { getSystemTheme } from './util';
 import removeSystemCssClass = CSSUtils.removeSystemCssClass;
-import { createGlobalState } from '../globalState';
 
 export type BasicColorMode = 'light' | 'dark';
 export type BasicColorSchema = BasicColorMode | 'auto';
@@ -100,7 +100,7 @@ export function useColorMode<T extends string = BasicColorMode>(options: UseColo
       CSSUtils.pushToSystemCssClasses(classToApply);
       rootView.className = Array.from(rootViewClass).join(' ');
       const frame = Frame.topmost();
-      frame.backStack.forEach((backStack) => backStack.resolvedPage?._onCssStateChange());
+      frame?.backStack.forEach((backStack) => backStack?.resolvedPage?._onCssStateChange());
       rootView._getRootModalViews()?.forEach((view) => {
         view?._onCssStateChange();
       });
diff --git a/packages/vue/src/useEventListener/index.md b/packages/vue/src/useEventListener/index.md
index e7926ab..891b921 100644
--- a/packages/vue/src/useEventListener/index.md
+++ b/packages/vue/src/useEventListener/index.md
@@ -42,7 +42,7 @@ cleanup() // off all events
 ## Type declaration
 ```ts
 import { ViewRef } from "@nativescript-use/vue";
-import { EventData, GestureEventData, ShownModallyData, View } from "@nativescript/core";
+import { EventData, GestureEventData, ShownModallyData, View, CreateViewEventData } from "@nativescript/core";
 
 type ViewEventData<T> = Omit<EventData, 'object'> & {
     object: T;
@@ -53,6 +53,9 @@ type ViewGestureEventData<T> = Omit<GestureEventData, 'object'> & {
 type ViewShownModallyData<T> = Omit<ShownModallyData, 'object'> & {
     object: T;
 };
+type CreatingViewEventData = Omit<CreateViewEventData, 'object'> & {
+  object: Placeholder;
+};
 interface Event<T = View> {
     /* Lifecycle */
     loaded?: (eventData: ViewEventData<T>) => void;
@@ -77,6 +80,8 @@ interface Event<T = View> {
     accessibilityPerformEscape?: (eventData: ViewEventData<T>) => void;
     /* Layouts */
     scroll?: (eventData: ViewScrollEventData) => void;
+    /* Components */
+    creatingView?: (eventData: CreatingViewEventData) => void;
 }
 /**
  * Register using view.on on mounted, and view.off automatically on unmounted.
diff --git a/packages/vue/src/useEventListener/index.ts b/packages/vue/src/useEventListener/index.ts
index 4434c11..bb3a6b3 100644
--- a/packages/vue/src/useEventListener/index.ts
+++ b/packages/vue/src/useEventListener/index.ts
@@ -1,13 +1,15 @@
+import { CreateViewEventData, EventData, GestureEventData, Placeholder, ScrollEventData, ScrollView, ShownModallyData, View } from '@nativescript/core';
 import { onMounted, onUnmounted } from 'nativescript-vue';
-import { unrefView } from '../unrefView';
 import { ViewRef } from '../types';
-import { EventData, GestureEventData, ShownModallyData, View, ScrollEventData, ScrollView } from '@nativescript/core';
+import { unrefView } from '../unrefView';
 
 type ViewEventData<T> = Omit<EventData, 'object'> & { object: T };
 type ViewGestureEventData<T> = Omit<GestureEventData, 'object'> & { object: T };
 type ViewShownModallyData<T> = Omit<ShownModallyData, 'object'> & { object: T };
 type ViewScrollEventData<T = ScrollView> = Omit<ScrollEventData, 'object'> & { object: T };
-
+type CreatingViewEventData = Omit<CreateViewEventData, 'object'> & {
+  object: Placeholder;
+};
 interface Event<T = View> {
   /* Lifecycle */
   loaded?: (eventData: ViewEventData<T>) => void;
@@ -32,6 +34,8 @@ interface Event<T = View> {
   accessibilityPerformEscape?: (eventData: ViewEventData<T>) => void;
   /* Layouts */
   scroll?: (eventData: ViewScrollEventData) => void;
+  /* Components */
+  creatingView?: (eventData: CreatingViewEventData) => void;
 }
 
 /**
diff --git a/packages/vue/src/useSyncObservableArray/index.md b/packages/vue/src/useSyncObservableArray/index.md
index 6c6457a..f101682 100644
--- a/packages/vue/src/useSyncObservableArray/index.md
+++ b/packages/vue/src/useSyncObservableArray/index.md
@@ -72,7 +72,13 @@ const { observableArray } = useSyncObservableArray<MyType>(
 </script>
 ```
 
-### `pushAllInFirstSync`
+### `pushAllInFirstSync`  
+::: warning
+#### `@Deprecated from v0.0.46`
+
+ObservableArray will sync without checking for differences if it is empty. This improves performance and this option is no longer needed.
+:::
+
 A typical case is to declare a reactive array next to `useSyncObservableArray` and then make a request to a service to bring us all the information. In this scenario, the fastest thing is to directly synchronize the ObservableArray without checking for updates. With the property `pushAllInFirstSync: true` we indicate that the data is inserted in the first synchronization
 
 ## Hooks
diff --git a/packages/vue/src/useSyncObservableArray/index.ts b/packages/vue/src/useSyncObservableArray/index.ts
index 8146ec6..2963525 100644
--- a/packages/vue/src/useSyncObservableArray/index.ts
+++ b/packages/vue/src/useSyncObservableArray/index.ts
@@ -11,10 +11,9 @@ export enum OnPreUpdateType {
   Update
 } */
 
-type NotAnyResult<TypeToCheck, J> = unknown extends TypeToCheck ? ([keyof TypeToCheck] extends [never] ? TypeToCheck : J) : TypeToCheck;
+type NotAnyResult<TypeToCheck, J> = [J] extends [undefined] ? TypeToCheck : J;
 
-type preUpdate<T, J> = (item: T, index: number, updateType: OnPreUpdateType) => J;
-//type preSync<T, J> = (items: T[], syncType: OnPreSycType) => J[];
+type preUpdate<ReactiveItem, OAItem> = (item: ReactiveItem, index: number, updateType: OnPreUpdateType) => OAItem;
 
 const baseExcludeCompareFields = { startingSide: null, menuOpened: null };
 
@@ -24,8 +23,8 @@ const baseExcludeCompareFields = { startingSide: null, menuOpened: null };
  * @param arrayWatchTarge
  * @param options
  */
-export function useSyncObservableArray<T, J = any>(
-  arrayRef: Ref<T[]> | T[],
+export function useSyncObservableArray<ReactiveItem, OAItem = any>(
+  arrayRef: Ref<ReactiveItem[]> | ReactiveItem[],
   options: {
     addRemoveByField?: string;
     excludeCompareFields?: string[];
@@ -34,13 +33,17 @@ export function useSyncObservableArray<T, J = any>(
     checkAdded?: boolean;
     checkUpdates?: boolean;
     initialDelay?: number;
+    /**
+     * @deprecated ObservableArray will sync without checking for differences if it is empty. Applied since v0.0.46
+     */
     pushAllInFirstSync?: boolean;
     //   onPreSync?: preSync<T, J>,
     onPushInitialData?: () => void;
-    onPreUpdate?: preUpdate<T, J>;
+    onPreUpdate?: preUpdate<ReactiveItem, OAItem>;
   } = { addRemoveByField: '' }
 ) {
-  const { initialDelay = 0, checkRemoved = true, pushAllInFirstSync = false, checkAdded = true, checkUpdates = true, excludeCompareFields = undefined, addRemoveByField /* , onPreSync = undefined */, onPreUpdate = undefined, onPushInitialData = undefined } = options;
+  const { initialDelay = 0, checkRemoved = true, pushAllInFirstSync = false, watchUpdates = false, checkAdded = true, checkUpdates = true, excludeCompareFields = undefined, addRemoveByField /* , onPreSync = undefined */, onPreUpdate = undefined, onPushInitialData = undefined } = options;
+
   const excludeFields = {
     ...baseExcludeCompareFields,
     ...excludeCompareFields?.reduce((a: any, b) => {
@@ -53,14 +56,14 @@ export function useSyncObservableArray<T, J = any>(
   //let clearArray = runOnPreSync(onPreSync, getClearArray(arrayRef), OnPreSycType.Initial);
   let clearArray = getClearArray(arrayRef);
   if (onPreUpdate) {
-    clearArray = clearArray.map((item: T, index: number) => {
+    clearArray = clearArray.map((item: ReactiveItem, index: number) => {
       return runOnPreUpdate(onPreUpdate, item, index, OnPreUpdateType.Add);
     });
   }
 
-  const observableArray = createAndPushInitialData(clearArray, initialDelay, onPushInitialData);
+  const observableArray = createAndPushInitialData<ReactiveItem, OAItem>(clearArray, initialDelay, onPushInitialData) as ObservableArray<NotAnyResult<ReactiveItem, OAItem>>;
 
-  if (options?.watchUpdates && (isReactive(arrayRef) || isRef(arrayRef))) {
+  if (watchUpdates && (isReactive(arrayRef) || isRef(arrayRef))) {
     watch(arrayRef, () => sync(), { deep: true });
   }
 
@@ -71,12 +74,18 @@ export function useSyncObservableArray<T, J = any>(
     //const clearArray = newArray ? getClearArray(newArray) : getClearArray(arrayRef);
     //const itemList = runOnPreSync(onPreSync, clearArray,  OnPreSycType.Update);
     //console.log('Processing_[useSyncObservableArray.sync.itemList.length] ' + itemList.length);
-    if (pushAllInFirstSync && firstSync) {
+    if (observableArray.length === 0 || (pushAllInFirstSync && firstSync)) {
       firstSync = false;
       observableArray.push(...itemList);
       return;
     }
 
+    // If the array is empty, we will clear the observableArray
+    if (itemList.length === 0 && observableArray.length !== 0) {
+      observableArray.splice(0, observableArray.length);
+      return;
+    }
+
     if (checkRemoved) {
       const indexRemoved: number[] = [];
       observableArray.forEach((itemObservable: any, index: number) => {
@@ -124,8 +133,8 @@ export function useSyncObservableArray<T, J = any>(
   };
 }
 
-function createAndPushInitialData<J, T>(clearArray: NotAnyResult<J, T>[], initialDelay: number, onPushInitialData: () => void) {
-  let observableArray = new ObservableArray<NotAnyResult<J, T>>([]);
+function createAndPushInitialData<ReactiveItem, OAItem>(clearArray: NotAnyResult<ReactiveItem, OAItem>[], initialDelay: number, onPushInitialData: () => void) {
+  let observableArray = new ObservableArray<NotAnyResult<ReactiveItem, OAItem>>([]);
   if (initialDelay != 0) {
     setTimeout(() => {
       observableArray.push(...clearArray);
@@ -146,12 +155,12 @@ function createAndPushInitialData<J, T>(clearArray: NotAnyResult<J, T>[], initia
   return items;
 } */
 
-function runOnPreUpdate<T, J>(onPreUpdated: preUpdate<T, J> | undefined, item: T, index: number, type: OnPreUpdateType): T | J {
+function runOnPreUpdate<ReactiveItem, OAItem>(onPreUpdated: preUpdate<ReactiveItem, OAItem> | undefined, item: ReactiveItem, index: number, type: OnPreUpdateType): ReactiveItem | OAItem {
   if (onPreUpdated) return onPreUpdated(item, index, type);
   return item;
 }
 
-function getClearArray<T>(array: Ref<T[]> | T[]) {
+function getClearArray<ReactiveItem>(array: Ref<ReactiveItem[]> | ReactiveItem[]) {
   return cloneObject(extractArray(array));
 }
 
diff --git a/scripts/copy-packages.ts b/scripts/copy-packages.ts
new file mode 100644
index 0000000..15f3d56
--- /dev/null
+++ b/scripts/copy-packages.ts
@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+console.log('Copying package.json files to dist');
+
+const packagePatchs = path.resolve(__dirname, '..', 'packages');
+const dist = path.resolve(__dirname, '..', 'dist', 'packages');
+
+const packages = fs.readdirSync(packagePatchs, { withFileTypes: true }).filter((dirent) => dirent.isDirectory());
+
+packages.forEach((dirent) => {
+  const packagePath = path.resolve(packagePatchs, dirent.name, 'package.json');
+  if (fs.existsSync(packagePath)) {
+    const distPackagePath = path.resolve(dist, dirent.name, 'package.json');
+
+    if (!fs.existsSync(distPackagePath)) {
+      fs.copyFileSync(packagePath, distPackagePath);
+      console.log(`Copied ${dirent.name} package.json`);
+    }
+  }
+});