diff --git a/package.json b/package.json
index 806474b..3df7d06 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monorepo",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": "true",
   "scripts": {},
   "packageManager": "pnpm@7.32.0"
diff --git a/soft-skia-wasm/Cargo.toml b/soft-skia-wasm/Cargo.toml
index f59e618..616ec31 100644
--- a/soft-skia-wasm/Cargo.toml
+++ b/soft-skia-wasm/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "soft-skia-wasm"
-version = "0.11.0"
+version = "0.12.0"
 authors = ["meloalright <meloalright@gmail.com>"]
 edition = "2018"
 
diff --git a/soft-skia/Cargo.toml b/soft-skia/Cargo.toml
index 03c3cc7..c4dc409 100644
--- a/soft-skia/Cargo.toml
+++ b/soft-skia/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "soft_skia"
-version = "0.11.0"
+version = "0.12.0"
 edition = "2021"
 description="software rasterization skia binding"
 license = "MIT"
diff --git a/vue-playground/package-ci.json b/vue-playground/package-ci.json
index c4e232a..15b191d 100644
--- a/vue-playground/package-ci.json
+++ b/vue-playground/package-ci.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-playground",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -14,7 +14,8 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
-    "vue-skia": "0.1.1"
+    "vue3-progress": "0.0.1-beta4",
+    "vue-skia": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "^20.5.0",
diff --git a/vue-playground/package.json b/vue-playground/package.json
index ad9573d..bed09b3 100644
--- a/vue-playground/package.json
+++ b/vue-playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-playground",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -14,6 +14,7 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
+    "vue3-progress": "0.0.1-beta4",
     "vue-skia": "workspace:*"
   },
   "devDependencies": {
diff --git a/vue-playground/src/App.vue b/vue-playground/src/App.vue
index 6105bbe..6d34288 100644
--- a/vue-playground/src/App.vue
+++ b/vue-playground/src/App.vue
@@ -1,4 +1,5 @@
 <template>
+  <vue3-progress />
   <main v-if="!loading" style="text-align: center">
     <template v-if="true">
       <h1>Vue Skia</h1>
@@ -19,6 +20,7 @@
         </div>
         <VueLive
           :editorProps="{ lineNumbers: true }"
+          :delay="600"
           :code="!loading && !debug ? code : LoadingCode"
           :layout="CustomLayout"
           :components="{
@@ -113,6 +115,7 @@ import code from "./code";
 import LoadingCode from "./loading-code";
 import "vue-live/style.css";
 import "prism-themes/themes/prism-night-owl.css";
+
 export default defineComponent({
   name: "App",
   components: {
@@ -159,11 +162,15 @@ export default defineComponent({
       }
 
       this.loading = false;
+      (this as unknown as { $progress: { start: () => void; finish: () => void } }).$progress.finish();
     });
   },
+  created() {
+    (this as unknown as { $progress: { start: () => void; finish: () => void } }).$progress.start();
+  },
   methods: {
     input(event: any) {
-      this.code = event.target._value;
+      // this.code = event.target._value;
     },
     copy() {
       try {
diff --git a/vue-playground/src/main.ts b/vue-playground/src/main.ts
index d2a4e3f..4d64d91 100644
--- a/vue-playground/src/main.ts
+++ b/vue-playground/src/main.ts
@@ -1,7 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import { VueSkia } from 'vue-skia'
+import Vue3Progress from "vue3-progress";
 
 const app = createApp(App);
 app.use(VueSkia);
+app.use(Vue3Progress, {
+    position: "fixed",
+    color: "rgb(0, 161, 132)",
+  })
 app.mount("#app");
diff --git a/vue-skia-framework/package-publish.json b/vue-skia-framework/package-publish.json
index f09d2fb..181ffb1 100644
--- a/vue-skia-framework/package-publish.json
+++ b/vue-skia-framework/package-publish.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-skia",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "files": [
     "lib",
     "type.d.ts",
@@ -13,6 +13,6 @@
   "main": "./main.js",
   "module": "./main.js",
   "dependencies": {
-    "soft-skia-wasm": "0.11.0"
+    "soft-skia-wasm": "0.12.0"
   }
 }
diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts
index 8e3182b..5bb4f26 100644
--- a/vue-skia-framework/plugin/index.ts
+++ b/vue-skia-framework/plugin/index.ts
@@ -64,6 +64,7 @@ const VSKNode = (name: string) => {
             instance._ssw_id = (
               parent as ComponentInternalInstanceWithSoftSkiaWASM
             )._ssw_id;
+            instance._ssw_attached = true;
 
             instance._ssw_grouped = (child) => {
               core.setAttrBySerde(instance._ssw_id, {
@@ -103,6 +104,7 @@ const VSKNode = (name: string) => {
                 }
                 const core = root.ssw;
                 instance._ssw_id = SelfIncreaseCount.count;
+                instance._ssw_attached = true;
                 var parent = instance.parent;
                 while (!('_ssw_id' in parent)) {
                     parent = parent.parent;
@@ -208,7 +210,10 @@ const VSKNode = (name: string) => {
                 while (!('_ssw_id' in parent)) {
                     parent = parent.parent;
                 }
-                core.removeChildFromContainer(child_id, (parent as ComponentInternalInstanceWithSoftSkiaWASM)._ssw_id)
+                instance._ssw_attached = false;
+                if ((parent as ComponentInternalInstanceWithSoftSkiaWASM)._ssw_attached && parent.isMounted) {
+                  core.removeChildFromContainer(child_id, (parent as ComponentInternalInstanceWithSoftSkiaWASM)._ssw_id)
+                }
             });
 
             return () => h(name, {}, slots.default?.())
diff --git a/vue-skia-framework/type.ts b/vue-skia-framework/type.ts
index 82a975a..b1259a3 100644
--- a/vue-skia-framework/type.ts
+++ b/vue-skia-framework/type.ts
@@ -6,6 +6,7 @@ import { SoftSkiaWASM } from '../soft-skia-wasm/pkg/';
 export type ComponentInternalInstanceWithSoftSkiaWASM = ComponentInternalInstance & {
     ssw: SoftSkiaWASM;
     _ssw_id: number;
+    _ssw_attached: boolean;
     _ssw_grouped?: (instance: ComponentInternalInstanceWithSoftSkiaWASM) => void;
     _ssw_batchDraw?: () => void;
 }