<template>
    <v-card flat height="100%">
        <div class="col-lg-12 control-section">
            <div>
                <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' :height='380'>
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
                        <e-column field='taskName' headerText='Task Name' width='200'></e-column>
                        <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
                        <e-column field='endDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
                        <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
                        <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
                        <e-column field='priority' headerText='Priority' width='90'></e-column>
                    </e-columns>
                </ejs-treegrid>
            </div>
        </div>
    </v-card>
</template>

<script>
<script>
    import Vue from 'vue'
    import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid"

    Vue.use(TreeGridPlugin);
    export default {
        data() {
            return {
                data: []
            }
        },
        ....
    }
</script>