diff --git a/examples/next/index.js b/examples/next/index.js
index 6b59b25..77f3857 100644
--- a/examples/next/index.js
+++ b/examples/next/index.js
@@ -1,4 +1,63 @@
+import { markRaw, reactive, computed, onMounted } from 'vue'
 
-export default {
+const apps = {}
 
+export function createMeta () {
+  const id = Symbol()
+
+  const Meta = {
+    id,
+
+    install(app) {
+      let watchersAdded = false
+
+      app.mixin({
+        created() {
+          if (this === this.$root) {
+            
+            watchersAdded = true
+          }
+
+          if (!this.metaData) {
+            return
+          }
+
+          let depth = 0
+          let parent = this
+          while (parent) {
+            parent = parent.$parent
+            depth++
+
+            if (parent === this.$root) {
+              break
+            }
+          }
+
+          const __meta = markRaw({
+            depth
+          })
+          console.log('CREATED', this, this.metaData, depth)
+        }
+      })
+
+      app.config.globalProperties.$meta = this
+    }
+  }
+
+  apps[id] = Meta
+
+  return Meta
+}
+
+export function useMeta () {
+  onMounted(vmMounted)
+
+  const metaData = reactive([])
+  console.log(this)
+
+  return metaData
+}
+
+function vmMounted() {
+  console.log('MOUNTED', this, arguments)
 }
diff --git a/examples/package.json b/examples/package.json
index 4cf5989..156d8ac 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -23,7 +23,7 @@
     "@babel/core": "^7.9.0",
     "@babel/node": "^7.8.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
     "@vue/compiler-sfc": "^3.0.0-alpha.10",
     "@vue/server-renderer": "^3.0.0-alpha.10",
     "babel-loader": "^8.1.0",
diff --git a/examples/vue-router/about.vue b/examples/vue-router/about.vue
index fe2c414..b4f0fc2 100644
--- a/examples/vue-router/about.vue
+++ b/examples/vue-router/about.vue
@@ -22,7 +22,7 @@ export default {
 
     onMounted(() => console.log(route))
 
-    return { metaUpdated, page: route.value.name }
+    return { metaUpdated, page: route.name }
   }
 }
 </script>
diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js
index 58c490d..a9cc7e3 100644
--- a/examples/vue-router/app.js
+++ b/examples/vue-router/app.js
@@ -1,21 +1,30 @@
-import { createApp, defineComponent, reactive, toRefs, h } from 'vue'
+import { createApp, defineComponent, reactive, toRefs, h, onMounted } from 'vue'
 import VueMeta from 'vue-meta'
 import { createRouter, createWebHistory } from 'vue-router'
 import About from './about.vue'
+import { createMeta, useMeta } from '../next'
 
 /*Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })*/
 
+const meta = createMeta({
+
+})
+
 let metaUpdated = 'no'
 const ChildComponent = defineComponent({
   name: 'child-component',
   props: {
     page: String
   },
-  template: `<div>
-<h3>You're looking at the <strong>{{ page }}</strong> page</h3>
-<p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
+  template: `
+<metainfo>
+  <title>Another Title</title>
+</metainfo>
+<div>
+  <h3>You're looking at the <strong>{{ page }}</strong> page</h3>
+  <p>Has metaInfo been updated due to navigation? {{ metaUpdated }}</p>
 </div>`,
   metaInfo () {
     return {
@@ -28,13 +37,26 @@ const ChildComponent = defineComponent({
       }
     }
   },
+  created () {
+    console.log(this)
+  },
   setup () {
+    const metaData = useMeta({
+    })
+
     const state = reactive({
       date: null,
       metaUpdated
     })
 
+
+    onMounted(function vmMounted() {
+      console.log('MOUNTED', this, arguments)
+    })
+
+
     return {
+      metaData,
       ...toRefs(state)
     }
   },
@@ -68,8 +90,29 @@ const router = createRouter({
   ]
 })
 
+const Metadata = {
+  template: `
+    <teleport to="head">
+      <slot />
+    </teleport>
+
+    <teleport to="body">
+      <slot name="body" />
+    </teleport>
+  `
+}
+
 const App = {
   template: `
+    <metainfo>
+      <title>My Title</title>
+      <meta name="charset" content="utf8" />
+
+      <template v-slot:body>
+        <script>var a = 1</script>
+      </template>
+    </metainfo>
+
     <div id="app">
       <h1>vue-router</h1>
       <router-link to="/">Home</router-link>
@@ -83,8 +126,9 @@ const App = {
 }
 
 const app = createApp(App)
+app.component('metainfo', Metadata)
 app.use(router)
-
+app.use(meta)
 /*
 const { set, remove } = app.$meta().addApp('custom')
 
diff --git a/examples/vue-router/index.html b/examples/vue-router/index.html
index 7ae5a53..7d68002 100644
--- a/examples/vue-router/index.html
+++ b/examples/vue-router/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
-<link rel="stylesheet" href="/global.css">
-<a href="/">&larr; Examples index</a>
-<div id="app"></div>
-<script src="/__build__/vue-router.js"></script>
-<style>
-.page-enter-active, .page-leave-active {
-  transition: opacity .5s
-}
-.page-enter, .page-leave-to {
-  opacity: 0
-}
-</style>
+<html>
+<head>
+  <link rel="stylesheet" href="/global.css">
+  <style>
+  .page-enter-active, .page-leave-active {
+    transition: opacity .5s
+  }
+  .page-enter, .page-leave-to {
+    opacity: 0
+  }
+  </style>
+</head>
+<body>
+  <a href="/">&larr; Examples index</a>
+  <div id="app"></div>
+  <script src="/__build__/vue-router.js"></script>
+</body>
+</html>