diff --git a/lib/types/json-array.vue b/lib/types/json-array.vue
index 41758a0..6e405cb 100644
--- a/lib/types/json-array.vue
+++ b/lib/types/json-array.vue
@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -57,9 +58,9 @@ export default {
         this.$el.dispatchEvent(evt)
       }
     },
-    
+
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -68,9 +69,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
-          click: this.toggle
-        }
+        onClick: this.toggle
       }))
     }
 
@@ -79,9 +78,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
-        innerText: '['
-      }
+      innerText: '['
     }))
     if (this.expand) {
       this.value.forEach((value, key) => {
@@ -90,13 +87,11 @@ export default {
           style: {
             display: this.expand ? undefined : 'none'
           },
-          props: {
-            sort: this.sort,
-            // keyName: key,
-            depth: this.depth + 1,
-            value,
-            previewMode: this.previewMode,
-          }
+          sort: this.sort,
+          // keyName: key,
+          depth: this.depth + 1,
+          value,
+          previewMode: this.previewMode,
         }))
       })
     }
@@ -109,15 +104,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
-          click: this.toggle
-        },
-        attrs: {
-          title: `click to reveal ${this.value.length} hidden items`
-        },
-        domProps: {
-          innerText: '...'
-        }
+        onClick: this.toggle,
+        title: `click to reveal ${this.value.length} hidden items`,
+        innerText: '...'
       }))
     }
 
@@ -126,9 +115,7 @@ export default {
         'jv-item': true,
         'jv-array': true,
       },
-      domProps: {
-        innerText: ']'
-      }
+      innerText: ']'
     }))
 
     return h('span', elements)
diff --git a/lib/types/json-boolean.vue b/lib/types/json-boolean.vue
index 75a0bca..1646f36 100644
--- a/lib/types/json-boolean.vue
+++ b/lib/types/json-boolean.vue
@@ -1,19 +1,19 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonBoolean',
   functional: true,
   props: {
     jsonValue: Boolean
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-boolean': true,
       },
-      domProps: {
-        innerText: props.jsonValue.toString()
-      }
+      innerText: this.jsonValue.toString()
     })
   }
 }
diff --git a/lib/types/json-date.vue b/lib/types/json-date.vue
index 6b54103..7d38af7 100644
--- a/lib/types/json-date.vue
+++ b/lib/types/json-date.vue
@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonDate',
   inject: ['timeformat'],
@@ -9,18 +11,16 @@ export default {
       required: true
     }
   },
-  render (h, { props, injections }) {
-    const value = props.jsonValue;
-    const timeformat = injections.timeformat;
+  render () {
+    const value = this.jsonValue;
+    const timeformat = this.timeformat;
 
     return h('span', {
       class: {
         'jv-item': true,
         'jv-string': true,
       },
-      domProps: {
-        innerText: `"${timeformat(value)}"`
-      }
+      innerText: `"${timeformat(value)}"`
     })
   }
 };
diff --git a/lib/types/json-function.vue b/lib/types/json-function.vue
index 7ee97a6..8f17613 100644
--- a/lib/types/json-function.vue
+++ b/lib/types/json-function.vue
@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonFunction',
   functional: true,
@@ -8,18 +10,16 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-function': true,
       },
       attrs: {
-        title: props.jsonValue.toString()
+        title: this.jsonValue.toString()
       },
-      domProps: {
-        innerHTML: '&lt;function&gt;'
-      }
+      innerHTML: '&lt;function&gt;'
     })
   }
 }
diff --git a/lib/types/json-number.vue b/lib/types/json-number.vue
index c614d42..26dc97b 100644
--- a/lib/types/json-number.vue
+++ b/lib/types/json-number.vue
@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonNumber',
   functional: true,
@@ -8,8 +10,8 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
-    const isInteger = Number.isInteger(props.jsonValue)
+  render () {
+    const isInteger = Number.isInteger(this.jsonValue)
 
     return h('span', {
       class: {
@@ -18,9 +20,7 @@ export default {
         'jv-number-integer': isInteger,
         'jv-number-float': !isInteger,
       },
-      domProps: {
-        innerText: props.jsonValue.toString()
-      }
+      innerText: this.jsonValue.toString()
     })
   }
 }
diff --git a/lib/types/json-object.vue b/lib/types/json-object.vue
index 24415f9..1781576 100644
--- a/lib/types/json-object.vue
+++ b/lib/types/json-object.vue
@@ -1,4 +1,5 @@
 <script>
+import { h } from 'vue'
 import JsonBox from '../json-box'
 
 export default {
@@ -67,7 +68,7 @@ export default {
       }
     }
   },
-  render (h) {
+  render () {
     let elements = []
 
     if (!this.previewMode && !this.keyName) {
@@ -76,9 +77,7 @@ export default {
           'jv-toggle': true,
           'open': !!this.expand,
         },
-        on: {
-          click: this.toggle
-        }
+        onClick: this.toggle
       }))
     }
 
@@ -87,9 +86,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
-        innerText: '{'
-      }
+      innerText: '{'
     }))
 
     if (this.expand) {
@@ -102,13 +99,12 @@ export default {
             style: {
               display: !this.expand ? 'none' : undefined
             },
-            props: {
-              sort: this.sort,
-              keyName: key,
-              depth: this.depth + 1,
-              value,
-              previewMode: this.previewMode,
-            }
+
+            sort: this.sort,
+            keyName: key,
+            depth: this.depth + 1,
+            value,
+            previewMode: this.previewMode,
           }))
         }
       }
@@ -122,15 +118,9 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
-          click: this.toggle
-        },
-        attrs: {
-          title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`
-        },
-        domProps: {
-          innerText: '...'
-        }
+        onClick: this.toggle,
+        title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`,
+        innerText: '...'
       }))
     }
 
@@ -139,9 +129,7 @@ export default {
         'jv-item': true,
         'jv-object': true,
       },
-      domProps: {
-        innerText: '}'
-      }
+      innerText: '}'
     }))
 
     return h('span', elements)
diff --git a/lib/types/json-string.vue b/lib/types/json-string.vue
index 706baad..cb64a8f 100644
--- a/lib/types/json-string.vue
+++ b/lib/types/json-string.vue
@@ -1,5 +1,9 @@
 <script>
+import { h } from 'vue'
+
+// TODO: check?
 const REG_LINK = /^\w+:\/\//;
+// const REG_LINK =/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
 
 export default {
   name: 'JsonString',
@@ -25,7 +29,7 @@ export default {
       this.expand = !this.expand;
     }
   },
-  render (h) {
+  render () {
     let value = this.jsonValue;
     const islink = REG_LINK.test(value)
     let domItem
@@ -35,12 +39,8 @@ export default {
         class: {
           'jv-ellipsis': true,
         },
-        on: {
-          click: this.toggle
-        },
-        domProps: {
-          innerText: '...'
-        }
+        onClick: this.toggle,
+        innerText: '...'
       };
     } else {
       domItem = {
@@ -52,16 +52,12 @@ export default {
       }
       if (islink) {
         value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
-        domItem.domProps = {
-          innerHTML: `"${value.toString()}"`
-        }
+        domItem.innerHTML = `"${value.toString()}"`
       } else {
-        domItem.domProps = {
-          innerText: `"${value.toString()}"`
-        }
+        domItem.innerText = `"${value.toString()}"`
       }
     }
-    
+
 
     return h('span', {}, [
       this.canExtend && h('span', {
@@ -69,9 +65,7 @@ export default {
           'jv-toggle': true,
           open: this.expand,
         },
-        on: {
-          click: this.toggle,
-        }
+        onClick: this.toggle,
       }),
       h('span', {
         class: {
diff --git a/lib/types/json-undefined.vue b/lib/types/json-undefined.vue
index 2f918af..4859016 100644
--- a/lib/types/json-undefined.vue
+++ b/lib/types/json-undefined.vue
@@ -1,4 +1,6 @@
 <script>
+import { h } from 'vue'
+
 export default {
   name: 'JsonUndefined',
   functional: true,
@@ -8,15 +10,13 @@ export default {
       default: null
     }
   },
-  render (h, { props }) {
+  render () {
     return h('span', {
       class: {
         'jv-item': true,
         'jv-undefined': true,
       },
-      domProps: {
-        innerText: props.jsonValue === null ? 'null' : 'undefined'
-      }
+      innerText: this.jsonValue === null ? 'null' : 'undefined'
     })
   }
 }