diff --git a/examples/attach-effect/Counter.mjs b/examples/attach-effect/Counter.mjs
index 409ddc2..679c45d 100644
--- a/examples/attach-effect/Counter.mjs
+++ b/examples/attach-effect/Counter.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 import { attachEffect } from "../../src/attach-effect.js";
 
 export class Counter extends WebComponent {
diff --git a/examples/attach-effect/Decrease.mjs b/examples/attach-effect/Decrease.mjs
index e8af741..34eff75 100644
--- a/examples/attach-effect/Decrease.mjs
+++ b/examples/attach-effect/Decrease.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 import { attachEffect } from "../../src/attach-effect.js";
 
 export class Decrease extends WebComponent {
diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs
index 140fcf7..2092f6d 100644
--- a/examples/demo/BooleanPropTest.mjs
+++ b/examples/demo/BooleanPropTest.mjs
@@ -1,4 +1,4 @@
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class BooleanPropTest extends WebComponent {
   static properties = ["is-inline", "anotherone"];
diff --git a/examples/demo/Counter.mjs b/examples/demo/Counter.mjs
index b1e4503..03a0692 100644
--- a/examples/demo/Counter.mjs
+++ b/examples/demo/Counter.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class Counter extends WebComponent {
   static properties = ["count"];
diff --git a/examples/demo/HelloWorld.mjs b/examples/demo/HelloWorld.mjs
index 1518fe5..7321f93 100644
--- a/examples/demo/HelloWorld.mjs
+++ b/examples/demo/HelloWorld.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class HelloWorld extends WebComponent {
   static properties = ["count", "emotion"];
diff --git a/examples/demo/SimpleText.mjs b/examples/demo/SimpleText.mjs
index 37e2702..0efd48c 100644
--- a/examples/demo/SimpleText.mjs
+++ b/examples/demo/SimpleText.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 class SimpleText extends WebComponent {
   clickCallback() {
diff --git a/examples/pens/counter-toggle.html b/examples/pens/counter-toggle.html
index 00d6c43..87470c9 100644
--- a/examples/pens/counter-toggle.html
+++ b/examples/pens/counter-toggle.html
@@ -10,7 +10,7 @@
       }
     </style>
     <script type="module">
-      import WebComponent from "https://unpkg.com/web-component-base@1.13.3/WebComponent.min.js";
+      import { WebComponent } from "https://unpkg.com/web-component-base@1.13.3/WebComponent.min.js";
 
       /**
        * @see https://ayco.io/n/web-component-base
diff --git a/examples/type-restore/Counter.mjs b/examples/type-restore/Counter.mjs
index 7349ed4..ad7820e 100644
--- a/examples/type-restore/Counter.mjs
+++ b/examples/type-restore/Counter.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class Counter extends WebComponent {
   static properties = ["count"];
diff --git a/examples/type-restore/HelloWorld.mjs b/examples/type-restore/HelloWorld.mjs
index 409c439..951ed2c 100644
--- a/examples/type-restore/HelloWorld.mjs
+++ b/examples/type-restore/HelloWorld.mjs
@@ -1,4 +1,4 @@
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class HelloWorld extends WebComponent {
   static properties = ["name"];
diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs
index 24b432c..1fbed07 100644
--- a/examples/type-restore/Object.mjs
+++ b/examples/type-restore/Object.mjs
@@ -1,14 +1,18 @@
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class ObjectText extends WebComponent {
   static properties = ["object"];
   onInit() {
     this.props.object = {
-        hello: 'world'
+        hello: 'world',
+        age: 2
     };
   }
+  onChanges() {
+    console.log('>>> object', this.props.object)
+  }
   get template() {
-    return `<textarea>${this.props.object}</textarea>`;
+    return `<textarea>${JSON.stringify(this.props.object)}</textarea>`;
   }
 }
 
diff --git a/examples/type-restore/Toggle.mjs b/examples/type-restore/Toggle.mjs
index 66fba87..e149339 100644
--- a/examples/type-restore/Toggle.mjs
+++ b/examples/type-restore/Toggle.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import WebComponent from "../../src/WebComponent.js";
+import { WebComponent } from "../../src/WebComponent.js";
 
 export class Toggle extends WebComponent {
   static properties = ["toggle"];
diff --git a/examples/type-restore/index.html b/examples/type-restore/index.html
index 11d470a..dbf9646 100644
--- a/examples/type-restore/index.html
+++ b/examples/type-restore/index.html
@@ -18,7 +18,7 @@
     <div>
       Counter: <my-counter></my-counter>
     </div>
-    <!-- <div>
+    <div>
       Toggle: <my-toggle></my-toggle>
     </div>
     <div>
@@ -26,6 +26,6 @@
     </div>
     <div>
       Object: <my-object />
-    </div> -->
+    </div>
   </body>
 </html>
diff --git a/package.json b/package.json
index 8ee7e8e..a6aaa9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
@@ -12,14 +12,15 @@
       "types": "./WebComponent.d.ts",
       "import": "./WebComponent.js"
     },
+    "./attach-effect": {
+      "types": "./attach-effect.d.ts",
+      "import": "./attach-effect.js"
+    },
     "./WebComponent.min.js": {
       "types": "./WebComponent.d.ts",
       "import": "./WebComponent.min.js"
     },
-    "./attach-effect": {
-      "types": "./attach-effect.d.ts",
-      "import": "./attach-effect.js"
-    }
+    "./package.json": "./package.json"
   },
   "scripts": {
     "start": "npx simple-server .",
diff --git a/sample.html b/sample.html
index a521ae2..0473349 100644
--- a/sample.html
+++ b/sample.html
@@ -3,7 +3,7 @@
   <head>
     <title>WC Base Test</title>
     <script type="module">
-      import WebComponent from "./src/WebComponent.js";
+      import { WebComponent } from "./src/WebComponent.js";
 
       class HelloWorld extends WebComponent {
         static properties = ["my-name"];
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 8d8a369..46a5ffa 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -57,7 +57,7 @@
         <p>The result is a reactive UI on property changes: <my-counter></my-counter></p>
         <code-block language="js">
           <pre>
-import WebComponent from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;;
+import { WebComponent } from &quot;https://unpkg.com/web-component-base@1.13.0/WebComponent.min.js&quot;;
 
 export class Counter extends WebComponent {
   static properties = [&quot;count&quot;];
diff --git a/src/WebComponent.js b/src/WebComponent.js
index 932715e..5075b87 100644
--- a/src/WebComponent.js
+++ b/src/WebComponent.js
@@ -93,7 +93,7 @@ export class WebComponent extends HTMLElement {
 
     if (previousValue !== currentValue) {
       this[property] = currentValue === "" || currentValue;
-      this[camelCaps] = this[property]; // remove on v2
+      this[camelCaps] = this[property];
 
       this.#handleUpdateProp(camelCaps, this[property]);
 
@@ -102,10 +102,9 @@ export class WebComponent extends HTMLElement {
     }
   }
 
-  #handleUpdateProp(key, value) {
-    const restored = this.#restoreType(value, this.#typeMap[key]);
-
-    if (restored !== this.props[key]) this.props[key] = value;
+  #handleUpdateProp(key, stringifiedValue) {
+    const restored = this.#deserialize(stringifiedValue, this.#typeMap[key]);
+    if (restored !== this.props[key]) this.props[key] = restored;
   }
 
   #getCamelCaps(kebab) {
@@ -113,19 +112,6 @@ export class WebComponent extends HTMLElement {
   }
 
   #typeMap = {};
-
-  #restoreType = (value, type) => {
-    switch (type) {
-      case "string":
-        return value;
-      case "number":
-      case "boolean":
-        return JSON.parse(value);
-      default:
-        return value;
-    }
-  };
-
   #effectsMap = {};
 
   #handler(setter, meta) {
@@ -151,19 +137,19 @@ export class WebComponent extends HTMLElement {
             effectsMap[prop] = [];
           }
           effectsMap[prop].push(value.callback);
-          console.log('>>> ', Object.getPrototypeOf(obj[prop]).prop)
         } else if (oldValue !== value) {
           obj[prop] = value;
           effectsMap[prop]?.forEach((f) => f(value));
           const kebab = getKebab(prop);
-          setter(kebab, value);
+
+          setter(kebab, meta.#serialize(value));
         }
 
         return true;
       },
       get(obj, prop) {
         // TODO: handle non-objects
-        if(obj[prop] !== null && obj[prop] !== undefined) {
+        if (obj[prop] !== null && obj[prop] !== undefined) {
           Object.getPrototypeOf(obj[prop]).proxy = meta.#props;
           Object.getPrototypeOf(obj[prop]).prop = prop;
         }
@@ -172,6 +158,29 @@ export class WebComponent extends HTMLElement {
     };
   }
 
+  #deserialize(value, type){
+    switch (type) {
+      case 'number':
+      case 'boolean':
+      case 'object':
+      case 'undefined':
+        return JSON.parse(value);
+      default:
+        return value;
+    }
+  };
+
+  #serialize(value) {
+    switch(typeof value) {
+      case 'number':
+      case 'boolean':
+      case 'object':
+      case 'undefined':
+        return JSON.stringify(value);
+      default: return value;
+    }
+  }
+
   #initializeProps() {
     if (!this.#props) {
       this.#props = new Proxy(
@@ -181,5 +190,3 @@ export class WebComponent extends HTMLElement {
     }
   }
 }
-
-export default WebComponent;
diff --git a/src/index.js b/src/index.js
index 213dd42..da242ef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,2 +1,2 @@
-export {attachEffect} from './attach-effect.js';
-export {default as WebComponent} from './WebComponent.js';
\ No newline at end of file
+export { attachEffect } from "./attach-effect.js";
+export { WebComponent } from "./WebComponent.js";