Dynamic Vue Components |Ethereal Visions Develpment

Today I just got dynamic components working in VueJS! This means that I can move forward as planned with allowing user customizable forms without having to serve php rendered html to Vue. This is a huge help given not only my current project/client, but with my plans for InfinityTable.

<template lang="html">
    <div class="form">
        <component v-for="field in form.children" :field="field" :data="data" :is="field.type">bad component</component>
    </div>
</template>
<script>
    import Text from './Text'
    export default {
        props: {
            form: {
                type: 'object',
                required: false,
                default: function () {
                    return {
                        children: [
                            {
                                type: 'Text',
                                name: 'test',
                                label: 'Test',
                                value: 'ttt',
                                help: 'please fill me out',
                                validate: '\.+',
                                required: true
                            }
                        ]
                    }
                }
            },
            data: {
                type: 'object',
                required: false,
                default: function () {
                    return {
                        test: 'fucker'
                    }
                }
            }
        },
        components: {
            'Text': Text
        }
    }
</script>