diff --git a/.releaserc.js b/.releaserc.js
index 11757e9..9a12d51 100644
--- a/.releaserc.js
+++ b/.releaserc.js
@@ -1,8 +1,12 @@
 module.exports = {
+  branches: [
+    { name: "master" },
+    { name: "next", channel: "next", prerelease: "alpha" }, // Only after the `next` is created in the repo
+  ],
   plugins: [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/npm",
-    "@semantic-release/github"
-  ]
+    "@semantic-release/github",
+  ],
 };
diff --git a/demo/App.vue b/demo/App.vue
index 061e3b7..01c218e 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -18,6 +18,7 @@
         :editorProps="{ lineNumbers: true }"
         :code="codeTemplate"
         :layout="CustomLayout"
+        :components="registeredComponents"
         @error="(e) => log('Error on first example', e)"
       />
     </div>
@@ -98,6 +99,7 @@
 </template>
 <script>
 import { markRaw } from "vue";
+import DatePicker from "vue3-datepicker";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 import CustomLayout from "./CustomLayout";
 import codeSfc from "!!raw-loader!./assets/Button.vue";
@@ -107,6 +109,7 @@ import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";
 import codeChicago from "!!raw-loader!./assets/Chicago.jsx";
 import all from "./assets/chicagoNeighbourhoods";
 import "prismjs/themes/prism-tomorrow.css";
+import "vue3-datepicker/dist/vue3-datepicker.css";
 
 import GithubCorners from "vue-github-corners";
 
@@ -115,6 +118,7 @@ export default {
   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
   data() {
     return {
+      registeredComponents: { DatePicker: markRaw(DatePicker) },
       codeSfc,
       codeTemplate,
       codeJs,
diff --git a/demo/assets/PureTemplate.html b/demo/assets/PureTemplate.html
index 8ae89cd..24e744f 100644
--- a/demo/assets/PureTemplate.html
+++ b/demo/assets/PureTemplate.html
@@ -2,4 +2,7 @@
 let today = new Date();
 
 <input type="checkbox" v-model="show">
-<h1 v-if="show">Hello World</h1>
+<date-picker 
+  style="text-align:center;" 
+  v-if="show" 
+  v-model="today"/>
diff --git a/package-lock.json b/package-lock.json
index 2cbc6d5..467aeb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18403,11 +18403,22 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "vuejs-datepicker": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.6.2.tgz",
-      "integrity": "sha512-PkC4vxzFBo7i6FSCUAJfnaWOx6VkKbOqxijSGHHlWxh8FIUKEZVtFychkonVWtK3iwWfhmYtqHcwsmgxefLpLQ==",
-      "dev": true
+    "vue3-datepicker": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue3-datepicker/-/vue3-datepicker-0.1.0.tgz",
+      "integrity": "sha512-AQh7K+XsMokHjfxT4UjsUiUJ9hAIO6g9/KibT6smJxqEFoAA1BZIWchXeHc3xKs7tN3eEUgZpakMBC5XK13K7A==",
+      "dev": true,
+      "requires": {
+        "date-fns": "^2.16.1"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+          "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==",
+          "dev": true
+        }
+      }
     },
     "w3c-hr-time": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index f36605b..2f3273d 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "vue": "^3.0.0",
     "vue-gh-corners": "^3.0.1",
     "vue-github-corners": "^1.2.3",
-    "vuejs-datepicker": "^1.6.2"
+    "vue3-datepicker": "^0.1.0"
   },
   "peerDependencies": {
     "vue": ">= 2.6.0"
diff --git a/src/Editor.vue b/src/Editor.vue
index e31e593..91734bf 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -1,7 +1,7 @@
 <template>
   <PrismEditor
     v-model="stableCode"
-    @input="updatePreview"
+    @update:modelValue="updatePreview"
     :highlight="highlighter"
     v-bind="editorProps"
   />
@@ -41,20 +41,21 @@ const highlight = (lang, jsxInExamples) => {
         return scriptCodeHighlighted;
       }
       const templateCode = code.slice(scriptCode.length);
-      const templateHighlighted = prismHighlight(templateCode, languages["html"], lang)
-      return (
-        scriptCodeHighlighted +
-        templateHighlighted
+      const templateHighlighted = prismHighlight(
+        templateCode,
+        languages["html"],
+        lang
       );
+      return scriptCodeHighlighted + templateHighlighted;
     };
   } else {
     return (code) => {
       const langScheme = languages[lang];
-      if(!langScheme){
-        return code
+      if (!langScheme) {
+        return code;
       }
       return prismHighlight(code, langScheme, lang);
-    }
+    };
   }
 };
 
diff --git a/src/Preview.vue b/src/Preview.vue
index db90c6d..d33e0c2 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { markRaw } from "vue";
+import { markRaw, h } from "vue";
 import {
   compile as compileScript,
   isCodeVueSfc,
@@ -148,7 +148,8 @@ export default {
               script,
               (filepath) => requireAtRuntime(this.requires, filepath),
               adaptCreateElement,
-              concatenate
+              concatenate,
+              h
             ) || {};
 
           if (this.dataScope) {
diff --git a/src/utils/evalInContext.js b/src/utils/evalInContext.js
index 56373a6..ee3a07b 100644
--- a/src/utils/evalInContext.js
+++ b/src/utils/evalInContext.js
@@ -8,10 +8,18 @@ export default function evalInContext(
   code,
   require,
   adaptCreateElement,
-  concatenate
+  concatenate,
+  h
 ) {
   // eslint-disable-next-line no-new-func
-  const func = new Function("require", "__pragma__", "__concatenate__", code);
+  const func = new Function(
+    "require",
+    "__pragma__",
+    "__concatenate__",
+    "h",
+    // FIXME: this "replace" should be removed as soona s the compiler utils are updated to vue 3
+    code.replace(/var h = this\.\$createElement;/, "")
+  );
 
-  return func(require, adaptCreateElement, concatenate);
+  return func(require, adaptCreateElement, concatenate, h);
 }
diff --git a/src/utils/getScript.js b/src/utils/getScript.js
index 97c8ee1..a0afb49 100644
--- a/src/utils/getScript.js
+++ b/src/utils/getScript.js
@@ -23,6 +23,8 @@ export default function(code, jsxInExamples) {
     return code;
   }
 
+  code = code || "";
+
   //else it will be considered pseudo jsx of vue-styleguidist
   return /^</.test(code.trim()) ? "" : code.split(/\n[\t ]*</)[0];
 }