use functional component

docs/src/demos/Examples/NodeView/Component.vue

@@ -7,7 +7,8 @@
     <component :is="inner" />
     <inner />
   </div> -->
-  <inner />
+  <inner as="p" class="hey" foo="bar" />
+  <!-- <component :is="inner" as="p" /> -->
 </template>
 
 <script>

packages/vue/src/VueRenderer.ts

@@ -38,16 +38,25 @@ class VueNodeView implements NodeView {
   mount(component: Vue | VueConstructor) {
     this.id = `id_${Math.random().toString(36).replace('0.', '')}`
 
+    const { id } = this
+
     const Inner = Vue.extend({
       functional: true,
-      render: createElement => {
+      // inheritAttrs: false,
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement, context) {
         return createElement(
-          'div', {
+          context.props.as, {
             style: {
               whiteSpace: 'pre-wrap',
             },
             attrs: {
-              id: this.id,
+              id,
             },
           },
         )