diff --git a/lib/components/T3CeBullets/T3CeBullets.vue b/lib/components/T3CeBullets/T3CeBullets.vue
index 7cc7285b..7e3d4784 100644
--- a/lib/components/T3CeBullets/T3CeBullets.vue
+++ b/lib/components/T3CeBullets/T3CeBullets.vue
@@ -1,16 +1,16 @@
-<template functional>
+<template>
   <div class="t3-ce-bullets">
-    <t3-ce-header v-bind="props" />
+    <t3-ce-header v-bind="$props" />
     <ul
-      :is="props.bulletsType === 1 ? 'ol' : 'ul'"
-      v-if="props.bulletsType === 0 || props.bulletsType === 1"
+      :is="bulletsType === 1 ? 'ol' : 'ul'"
+      v-if="bulletsType === 0 || bulletsType === 1"
     >
-      <li v-for="(el, index) in props.bodytext" :key="index">
+      <li v-for="(el, index) in bodytext" :key="index">
         {{ el }}
       </li>
     </ul>
     <dl v-else>
-      <template v-for="(el, index) in props.bodytext">
+      <template v-for="(el, index) in bodytext">
         <dt :key="index">
           {{ el[0] }}
         </dt>
diff --git a/lib/components/T3CeDefault/T3CeDefault.js b/lib/components/T3CeDefault/T3CeDefault.js
deleted file mode 100644
index 1b02eee4..00000000
--- a/lib/components/T3CeDefault/T3CeDefault.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  name: 'T3CeDefault',
-  functional: true,
-  render (createElement, ctx) {
-    return createElement(
-      'pre',
-      {
-        style: {
-          overflowX: 'scroll'
-        }
-      },
-      [
-        createElement(
-          'code',
-          {
-            style: {
-              fontSize: '12px',
-              fontFamily:
-                'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace'
-            }
-          },
-          [JSON.stringify(ctx.props, null, 2)]
-        )
-      ]
-    )
-  }
-}
diff --git a/lib/components/T3CeDefault/T3CeDefault.vue b/lib/components/T3CeDefault/T3CeDefault.vue
new file mode 100644
index 00000000..5c1eb0e6
--- /dev/null
+++ b/lib/components/T3CeDefault/T3CeDefault.vue
@@ -0,0 +1,23 @@
+<template>
+  <pre :style="{ overflowX: 'scroll' }">
+    <code
+      :style="{
+        fontSize: '12px',
+        fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace'
+      }"
+    >
+      {{ content }}
+    </code>
+  </pre>
+</template>
+
+<script>
+export default {
+  name: 'T3CeDefault',
+  computed: {
+    content () {
+      return JSON.stringify(this.$attrs, null, 2)
+    }
+  }
+}
+</script>
diff --git a/lib/components/T3CeDefault/index.js b/lib/components/T3CeDefault/index.js
index be3a1459..b791dfbf 100644
--- a/lib/components/T3CeDefault/index.js
+++ b/lib/components/T3CeDefault/index.js
@@ -1 +1 @@
-export { default } from './T3CeDefault.js'
+export { default } from './T3CeDefault.vue'
diff --git a/lib/components/T3CeDiv/T3CeDiv.vue b/lib/components/T3CeDiv/T3CeDiv.vue
index 781a852f..86a48d22 100644
--- a/lib/components/T3CeDiv/T3CeDiv.vue
+++ b/lib/components/T3CeDiv/T3CeDiv.vue
@@ -1,9 +1,8 @@
-<template functional>
+<template>
   <hr class="t3-ce-div">
 </template>
 <script>
 export default {
-  name: 'T3CeDiv',
-  functional: true
+  name: 'T3CeDiv'
 }
 </script>
diff --git a/lib/components/T3CeHtml/T3CeHtml.vue b/lib/components/T3CeHtml/T3CeHtml.vue
index 8a7d0eb4..9a9ef629 100644
--- a/lib/components/T3CeHtml/T3CeHtml.vue
+++ b/lib/components/T3CeHtml/T3CeHtml.vue
@@ -1,13 +1,12 @@
-<template functional>
+<template>
   <div class="t3-ce-html">
-    <t3-html-parser :content="props.bodytext" />
+    <t3-html-parser :content="bodytext" />
   </div>
 </template>
 <script>
 import baseCe from '../../mixins/component/baseCe'
 export default {
   name: 'T3CeHtml',
-  functional: true,
   extends: baseCe,
   props: {
     bodytext: {
diff --git a/lib/components/T3CeMenuPages/T3CeMenuPagesList.vue b/lib/components/T3CeMenuPages/T3CeMenuPagesList.vue
index ca7bb138..610e37ae 100644
--- a/lib/components/T3CeMenuPages/T3CeMenuPagesList.vue
+++ b/lib/components/T3CeMenuPages/T3CeMenuPagesList.vue
@@ -1,41 +1,40 @@
+<template>
+  <ul>
+    <li
+      v-for="child in children"
+      :key="child.id"
+    >
+      <t3-nav-link
+        :to="child.link"
+        :attrs="{
+          target: child.target || false,
+          title: child.title
+        }"
+      >
+        {{ child.title }}
+      </t3-nav-link>
+      <T3CeMenuPagesList
+        v-if="child.children"
+        :children="child.children"
+      />
+    </li>
+  </ul>
+</template>
+
 <script>
+import T3CeMenuPagesList from './T3CeMenuPagesList.vue'
+
 // helper component to render nested list
 export default {
-  functional: true,
+  name: 'T3CeMenuPagesList',
+  components: {
+    T3CeMenuPagesList
+  },
   props: {
     children: {
       type: Array,
       required: true
     }
-  },
-  render (createElement, ctx) {
-    return createElement(
-      'ul',
-      ctx.props.children.map((el) => {
-        return createElement('li', {}, [
-          createElement(
-            'nav-link',
-            {
-              props: {
-                to: el.link
-              },
-              attrs: {
-                target: el.target || false,
-                title: el.title
-              }
-            },
-            el.title
-          ),
-          el.children
-            ? createElement('T3CeMenuPagesList', {
-              props: {
-                children: el.children
-              }
-            })
-            : false
-        ])
-      })
-    )
   }
 }
 </script>
diff --git a/lib/components/T3CeShortcut/T3CeShortcut.vue b/lib/components/T3CeShortcut/T3CeShortcut.vue
index acfea278..e32a106b 100644
--- a/lib/components/T3CeShortcut/T3CeShortcut.vue
+++ b/lib/components/T3CeShortcut/T3CeShortcut.vue
@@ -1,21 +1,18 @@
+<template>
+  <div>
+    <T3Renderer :shortcut="shortcut" />
+  </div>
+</template>
+
 <script>
+
 export default {
   name: 'T3CeShortcut',
-  functional: true,
   props: {
     shortcut: {
       type: Array,
       required: true
     }
-  },
-  render (createElement, ctx) {
-    return createElement('div', [
-      createElement('t3-ce-renderer', {
-        props: {
-          content: ctx.props.shortcut
-        }
-      })
-    ])
   }
 }
 </script>
diff --git a/lib/components/T3Debug/T3Debug.vue b/lib/components/T3Debug/T3Debug.vue
index 4d93d1fb..2e1d4731 100644
--- a/lib/components/T3Debug/T3Debug.vue
+++ b/lib/components/T3Debug/T3Debug.vue
@@ -1,43 +1,35 @@
+<template>
+  <div
+    class="t3p-debug"
+    :style="{ position: 'relative' }"
+  >
+    <code
+      :style="{
+        width: '100%',
+        border: '2px solid #E53E3E',
+        color: '#000',
+        display: 'inline-block',
+        wordBreak: 'break-word',
+        position: 'absolute',
+        fontSize: '12px',
+        fontFamily:
+          'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
+        padding: '10px',
+        boxSizing: 'border-box',
+        top: 0,
+        left: 0,
+        backgroundColor: '#FED7D7'
+      }"
+    >
+      {{ JSON.stringify($attrs) }}
+    </code>
+    <slot />
+  </div>
+</template>
+
 <script>
 // you can use debug wrapper to display quickly CE data
 export default {
-  name: 'T3Debug',
-  functional: true,
-  render (createElement, ctx) {
-    return createElement(
-      'div',
-      {
-        style: {
-          position: 'relative'
-        },
-        class: 't3p-debug'
-      },
-      [
-        createElement(
-          'code',
-          {
-            style: {
-              width: '100%',
-              border: '2px solid #E53E3E',
-              color: '#000',
-              display: 'inline-block',
-              wordBreak: 'break-word',
-              position: 'absolute',
-              fontSize: '12px',
-              fontFamily:
-                'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
-              padding: '10px',
-              boxSizing: 'border-box',
-              top: 0,
-              left: 0,
-              backgroundColor: '#FED7D7'
-            }
-          },
-          JSON.stringify(ctx.props)
-        ),
-        ctx.children
-      ]
-    )
-  }
+  name: 'T3Debug'
 }
 </script>
diff --git a/lib/components/T3Frame/T3Frame.js b/lib/components/T3Frame/T3Frame.js
deleted file mode 100644
index 6d960132..00000000
--- a/lib/components/T3Frame/T3Frame.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Content element wrapper - Section Frame
-// All props are returned from appearance
-export default {
-  name: 'T3Frame',
-  functional: true,
-  props: {
-    frameClass: {
-      type: String,
-      default: ''
-    },
-    layout: {
-      type: String,
-      default: 'default'
-    },
-    spaceAfter: {
-      type: String,
-      default: 'default'
-    },
-    spaceBefore: {
-      type: String,
-      default: 'default'
-    }
-  },
-  render (createElement, { props, children, data }) {
-    return createElement(
-      'div',
-      {
-        class: [
-          't3-ce-frame',
-          `frame-${props.frameClass}`,
-          `layout-${props.layout}`,
-          `space-before-${
-            props.spaceBefore.length ? props.spaceBefore : 'default'
-          }`,
-          `space-after-${
-            props.spaceAfter.length ? props.spaceAfter : 'default'
-          }`
-        ],
-        attrs: data.attrs
-      },
-      children
-    )
-  }
-}
diff --git a/lib/components/T3Frame/T3Frame.vue b/lib/components/T3Frame/T3Frame.vue
new file mode 100644
index 00000000..683f0b54
--- /dev/null
+++ b/lib/components/T3Frame/T3Frame.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="t3-ce-frame"
+    :class="computedClasses"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<!-- Content element wrapper - Section Frame
+All props are returned from appearance -->
+<script>
+export default {
+  name: 'T3Frame',
+  props: {
+    frameClass: {
+      type: String,
+      default: ''
+    },
+    layout: {
+      type: String,
+      default: 'default'
+    },
+    spaceAfter: {
+      type: String,
+      default: 'default'
+    },
+    spaceBefore: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    computedClasses () {
+      return [
+          `frame-${this.frameClass}`,
+          `layout-${this.layout}`,
+          `space-before-${
+            this.spaceBefore.length ? this.spaceBefore : 'default'
+          }`,
+          `space-after-${
+            this.spaceAfter.length ? this.spaceAfter : 'default'
+          }`
+      ]
+    }
+  }
+}
+</script>
diff --git a/lib/components/T3Frame/__tests__/T3Frame.spec.js b/lib/components/T3Frame/__tests__/T3Frame.spec.js
index d2610c51..1ca1295d 100644
--- a/lib/components/T3Frame/__tests__/T3Frame.spec.js
+++ b/lib/components/T3Frame/__tests__/T3Frame.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import T3CeDiv from '../../T3CeDiv/T3CeDiv'
-import T3Frame from '../T3Frame.js'
+import T3Frame from '../T3Frame.vue'
 
 describe('T3Frame', () => {
   let wrapper
diff --git a/lib/components/T3Frame/index.js b/lib/components/T3Frame/index.js
index fdb3cdc7..d258019b 100644
--- a/lib/components/T3Frame/index.js
+++ b/lib/components/T3Frame/index.js
@@ -1 +1 @@
-export { default } from './T3Frame.js'
+export { default } from './T3Frame.vue'
diff --git a/lib/components/T3MediaFile/type/Audio.vue b/lib/components/T3MediaFile/type/Audio.vue
index c5021faf..1bf4e6c7 100644
--- a/lib/components/T3MediaFile/type/Audio.vue
+++ b/lib/components/T3MediaFile/type/Audio.vue
@@ -1,17 +1,15 @@
-<template functional>
+<template>
   <audio
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-audio"
     controls
   >
-    <source :src="props.file.publicUrl" type="audio/mp3">
+    <source :src="file.publicUrl" type="audio/mp3">
   </audio>
 </template>
 <script>
 export default {
   name: 'MediaAudio',
-  functional: true,
   props: {
     file: {
       type: Object,
diff --git a/lib/components/T3MediaFile/type/Image.vue b/lib/components/T3MediaFile/type/Image.vue
index c91fa310..86f86727 100644
--- a/lib/components/T3MediaFile/type/Image.vue
+++ b/lib/components/T3MediaFile/type/Image.vue
@@ -1,23 +1,22 @@
-<template functional>
+<template>
   <div
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-image"
   >
     <component
-      :is="props.file.properties.link ? 't3-nav-link' : 'div'"
-      :to="props.file.properties.link"
+      :is="file.properties.link ? 't3-nav-link' : 'div'"
+      :to="file.properties.link"
     >
       <figure>
         <img
-          :src="props.file.publicUrl"
-          :height="props.file.properties.dimensions.height"
-          :width="props.file.properties.dimensions.width"
-          :alt="props.file.properties.alternative || false"
-          :title="props.file.properties.title || ''"
+          :src="file.publicUrl"
+          :height="file.properties.dimensions.height"
+          :width="file.properties.dimensions.width"
+          :alt="file.properties.alternative || false"
+          :title="file.properties.title || ''"
         >
-        <figcaption v-if="props.file.properties.description">
-          {{ props.file.properties.description }}
+        <figcaption v-if="file.properties.description">
+          {{ file.properties.description }}
         </figcaption>
       </figure>
     </component>
@@ -27,7 +26,6 @@
 <script>
 export default {
   name: 'MediaImage',
-  functional: true,
   props: {
     file: {
       type: Object,
diff --git a/lib/components/T3MediaFile/type/Video.vue b/lib/components/T3MediaFile/type/Video.vue
index 08ea57b3..2f91c591 100644
--- a/lib/components/T3MediaFile/type/Video.vue
+++ b/lib/components/T3MediaFile/type/Video.vue
@@ -1,22 +1,20 @@
-<template functional>
+<template>
   <video
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
+    v-bind="$attrs"
     class="t3-ce-media-video"
     controls
   >
     <source
-      :src="props.file.publicUrl"
-      :height="props.file.properties.dimensions.height"
-      :width="props.file.properties.dimensions.width"
-      :type="props.file.properties.mimeType"
+      :src="file.publicUrl"
+      :height="file.properties.dimensions.height"
+      :width="file.properties.dimensions.width"
+      :type="file.properties.mimeType"
     >
   </video>
 </template>
 <script>
 export default {
   name: 'MediaVideo',
-  functional: true,
   props: {
     file: {
       type: Object,
diff --git a/lib/components/T3MediaFile/type/Vimeo.vue b/lib/components/T3MediaFile/type/Vimeo.vue
index bc32ba45..23e0e31e 100644
--- a/lib/components/T3MediaFile/type/Vimeo.vue
+++ b/lib/components/T3MediaFile/type/Vimeo.vue
@@ -1,11 +1,10 @@
-<template functional>
+<template>
   <iframe
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
-    :src="props.file.publicUrl"
-    :width="props.file.properties.dimensions.width || 640"
-    :height="props.file.properties.dimensions.height || 360"
-    :title="props.file.properties.title || false"
+    v-bind="$attrs"
+    :src="file.publicUrl"
+    :width="file.properties.dimensions.width || 640"
+    :height="file.properties.dimensions.height || 360"
+    :title="file.properties.title || false"
     frameborder="0"
     class="t3-ce-media-video t3-ce-media-vimeo"
     webkitallowfullscreen
@@ -16,7 +15,6 @@
 <script>
 export default {
   name: 'MediaVimeo',
-  functional: true,
   props: {
     file: {
       type: Object,
diff --git a/lib/components/T3MediaFile/type/Youtube.vue b/lib/components/T3MediaFile/type/Youtube.vue
index 1cdb2f32..fb3b17a2 100644
--- a/lib/components/T3MediaFile/type/Youtube.vue
+++ b/lib/components/T3MediaFile/type/Youtube.vue
@@ -1,12 +1,11 @@
-<template functional>
+<template>
   <iframe
-    v-if="props.file.publicUrl"
+    v-if="file.publicUrl"
     id="ytplayer"
-    v-bind="data.attrs"
-    :class="[data.class, data.staticClass]"
-    :width="props.file.properties.dimensions.width || 640"
-    :height="props.file.properties.dimensions.height || 360"
-    :src="props.file.publicUrl"
+    v-bind="$attrs"
+    :width="file.properties.dimensions.width || 640"
+    :height="file.properties.dimensions.height || 360"
+    :src="file.publicUrl"
     class="t3-ce-media-video t3-ce-media-youtube"
     type="text/html"
     frameborder="0"
@@ -15,7 +14,6 @@
 <script>
 export default {
   name: 'MediaYoutube',
-  functional: true,
   props: {
     file: {
       type: Object,
diff --git a/lib/components/T3NavLink/T3NavLink.vue b/lib/components/T3NavLink/T3NavLink.vue
index 21c28354..a17827f3 100644
--- a/lib/components/T3NavLink/T3NavLink.vue
+++ b/lib/components/T3NavLink/T3NavLink.vue
@@ -3,9 +3,14 @@
 import Vue from 'vue'
 export default {
   name: 'T3NavLink',
-  functional: true,
   extends: Vue.component('RouterLink'),
-  render (h, ctx) {
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  render (h) {
     function prepareLink (url) {
       if (typeof url === 'string' && url.match(/^((http(s)?|ftp):\/\/)|(mailto|tel):/)) {
         return {
@@ -25,24 +30,23 @@ export default {
         tag: 'nuxt-link',
         data: {},
         props: {
-          to: ctx.props.to || '/'
+          to: url || '/'
         }
       }
     }
 
-    const url = prepareLink(ctx.props.to)
-    const { tag, ...props } = ctx.props
+    const url = prepareLink(this.to)
     return h(
       url.tag,
       {
-        ...ctx.data,
+        ...this.$data,
         ...url.data,
         props: {
-          ...props,
+          ...this.$attrs,
           ...url.props
         }
       },
-      ctx.children
+      this.$slots.default
     )
   }
 }
diff --git a/lib/components/T3Renderer/__tests__/T3Renderer.spec.js b/lib/components/T3Renderer/__tests__/T3Renderer.spec.js
index f911ca31..b2cc65f5 100644
--- a/lib/components/T3Renderer/__tests__/T3Renderer.spec.js
+++ b/lib/components/T3Renderer/__tests__/T3Renderer.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import T3Frame from '../../T3Frame/T3Frame.js'
+import T3Frame from '../../T3Frame/T3Frame.vue'
 import T3Dynamic from '../../T3Dynamic/T3Dynamic.js'
 import T3Renderer from '../T3Renderer.js'
 import T3RendererMockData from './T3Renderer.data'