Nativescript-vue Typescript. Adding custom component to a layout container through code

Question

I am trying to add through code, a custom component (DinamycTable) created by myself. I am using Nativescript-vue 6.0 with Typescript.

I have the following code:

import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';

@Component({
    components: { DinamycTable, RowTable, CalendarComponent, CirclePhoto },
})
export default class extends BaseVue {
    $refs!: {
        calendar: CalendarComponent;
        stk_container: any;
    };
private dt: DinamycTable;

get stk_container(): StackLayout{
        return this.$refs.stk_container.nativeView;
    }

Then I am trying to add this component, with its properties:

mounted(){

this.dt = new DinamycTable();
this.dt.title = this.L('AdminSmallStatistic.text.1');
this.dt.icon_left = '';
this.dt.isIcon_left = false;
this.dt.icon_right= 'fa-angle-down';
this.dt.headers = headers;
this.stk_container.addChild(this.dt);
}

Then I got the following error:

Argument of type 'default' is not assignable to parameter of type 'View'.
  Type 'default' is missing the following properties from type 'View': android, ios, bindingContext, borderColor, and 171 more

This is the initial code from my custom component (DinamycTable):

<script lang="ts">
import { screen } from 'tns-core-modules/platform/platform';
import { Component, Prop } from 'vue-property-decorator';
import Vue from 'nativescript-vue';

@Component
export default class extends Vue {
    @Prop({ type: String, default: 'Titulo' }) title!: string;
}

I am trying to recreate the following code, but with a custom component created with Vue js.

Answer 1

Changing approach, you could render multiple Vue dynamic components.

If you have different components:

<template>
    <StackLayout>
        <component v-for="(child, i) in children"
            :is="child.component" :key="i" v-bind="child.props" />
    </StackLayout>
</template>

<script>
import ComponentA from "~/components/ComponentA";
import ComponentB from "~/components/ComponentB";

export default {
    data() {
        children: []
    },

    mounted() {
        this.children.push({
            props: { title: "Title 1" },
            component: ComponentA
        });
        this.children.push({
            props: { title: "Title 2" },
            component: ComponentB
        });
    }
}
</script>

Inspired by this

---

A simpler scenario with only one component:

<template>
    <StackLayout>
        <DynamicTable v-for="(props, i) in children" :key="i" v-bind="props" />
    </StackLayout>
</template>

<script>
import DynamicTable from "~/components/DynamicTable";

export default {
    components: {
        DynamicTable
    },

    data() {
        children: []
    },

    mounted() {
        this.children.push({
            title: "Title",
            // other props
        });
    }
}
</script>