vue.js vue3: use a sub-component (formkit) in a self-defined component, render in App (main)

Question

I'm using the formkit (https://formkit.com) component in my App.vue Using the formkit in main App.vue succeeds. The App requires more and more forms to be defined, I'm looking for a way to create a component to define the formkit forms , in the following allForms.vue and "include" that into my (main) App.vue

main.js:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
const myApp=app.mount("#app");

App.vue

`<template>
<all-forms></all-forms>
</template>
<script>
import allForms from './components/allForms.vue'
export default {
  name: 'App',
  data: () => ({}),
  components: {
    'all-forms': allForms
    }
}

allForms.vue

<template>
            <div name="viewform" id="en_form_buildings" style="text-align:left; padding:5px;">
              <FormKit type="form" id="en_buildings_create" title="Create" name="buildings_create-entitiy:building.action:create" @submit="submitFormKit">
                <FormKit
                  type="text"
                  name="name"
                  validation="required|length:1"
                  :validation-messages="{
                    length: 'You must enter a building name!',
                  }"
                  label="Building name"
                  help="Your building's name"
                  placeholder="Building name"
                />
                <FormKit
                  type="text"
                  name="address"
                  validation="required|length:1"
                  :validation-messages="{
                    length: 'You must enter an address!',
                  }"
                  label="Address"
                  help="Your address"
                  placeholder="address"
                />
              </FormKit>
              [....many more of these forms, that work, when inserted directly into App.vue...]
            </div>        
</template>

<script>
import { getNode } from '@formkit/core'
//local imports for formkit
import { plugin, defaultConfig } from '@formkit/vue'
import '@formkit/themes/genesis'

export default {
  name: 'all-forms',
  data: () => ({}),
  methods: {
    setFormKitFormInput(id, value)
    {
      const nodeA = getNode(id);
      nodeA.input(value);
    },

    //Called, when a FormKit Form is submitted
    async submitFormKit(fields)
    {
      await new Promise((r) => setTimeout(r, 100));
      var credentials=window.gCredFunct().split(':');
      fields["username"]=credentials[0];
      fields["password"]=credentials[1];
      alert(JSON.stringify(fields));
      //window.commitActionFunct(JSON.stringify(fields));
    },

    setup()
    {
      this.use(plugin, defaultConfig);
    }

  }
}
</script>`

I expected the formkit tags to be "translated" into html tags. If used without intermediate component "allForms.vue" and inspected in browser dev-tool, I see correctly translation, which is all tags have been transmorphed into: <form title="Create" class="formkit-form" id="en_buildings_create" name="buildings_create-entitiy:building.action:create">(...) But: Using my intermediate component, i see in my browser-dev-tool the raw nodes: <formkit type="form" id="en_buildings_create" title="Create" name="buildings_create-entitiy:building.action:create">(...) How do I force the raw nodes to be transformed?

Additional info: When using formkit in App.vue directly, I use formkit binding in main.js as follows:

import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import '@formkit/themes/genesis'

const app = createApp(App);
app.use(plugin, defaultConfig);
const myApp=app.mount("#app");

But using this code with the additional "allForms.vue", I get a browser runtime error (compiles well):

can't convert undefined to object
normalizeOptions@webpack-internal:///./node_modules/@formkit/inputs/dist/index.dev.mjs:183:17
(...)
mount@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3979:19
createApp/app.mount@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1607:24
@webpack-internal:///./src/main.js:419:19
./src/main.js@https://127.0.0.1:8080/js/app.js:63:1
__webpack_require__@https://127.0.0.1:8080/js/app.js:266:33
__webpack_exports__<@https://127.0.0.1:8080/js/app.js:1388:109
__webpack_require__.O@https://127.0.0.1:8080/js/app.js:312:23
@https://127.0.0.1:8080/js/app.js:1389:53
@https://127.0.0.1:8080/js/app.js:1391:12

What do I need to do, to render the formkit nodes when using the intermediate component "allForms.vue" as html form nodes as happens when directly using the formkit nodes without intermediate component (directly in App.vue)?

Thank you and best regards, Richard