如何使用nuxt.js实现jsganttimproved？

Question

Im trying to implement jsganttimproved with nuxt.js and i cant seem to figure out how to get the gantt chart plugged into the designated <div> element. 

这是我的index.vue，此视图内的所有功能均正常运行（我相信）

<template>
  <div class="container">
    <div> 

      <Gantt />

    </div>
  </div>
</template> 

<script>
import Gantt from '@/components/Gantt'
export default {
    components:{
        Gantt
    }
}
</script>

这是我的Gantt.vue，这是我的问题所在。基本上，我试图在div id ='gantt'元素内获取甘特对象，但是提供的vue示例利用了不会在服务器上运行的document.getElementById。我是nuxt的新手，我似乎想不出办法将两者联系起来。

<template>
        <div>
            <h1 class="title">
                SchedulerApp
            </h1>
            <h2 class="subtitle">
                Project Scheduling Application
            </h2>
            <div id='gantt'> {{ GanttChartDIV }}
            </div>
        </div>
    </template>

    <script>
        import Vue from 'vue'
        import * as JSGantt from 'jsgantt-improved';

        new Vue({
            el: '#gantt',
            template: '<h1>hello Vue<div ref="GanttChartDIV"></div></h1>'
        });

        const g = new JSGantt.GanttChart(GanttChartDIV, 'day');

        g.setOptions({
        vCaptionType: 'Complete',  
        vQuarterColWidth: 36,
        vDateTaskDisplayFormat: 'day dd month yyyy', 
        vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',
        vWeekMinorDateDisplayFormat: 'dd mon', 
        vLang: 'en',
        vShowTaskInfoLink: 1, 
        vShowEndWeekDate: 0,  
        vAdditionalHeaders: { 
            category: {
                title: 'Category'
            },
            sector: {
                title: 'Sector'
            }
            },
        vUseSingleCell: 10000, 
        vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], 

        });

         g.AddTaskItemObject({
           pID: 1,
           pName: "Define Chart API",
           pStart: "2017-02-25",
           pEnd: "2017-03-17",
           pPlanStart: "2017-04-01",
           pPlanEnd: "2017-04-15 12:00",
           pClass: "ggroupblack",
           pLink: "",
           pMile: 0,
           pRes: "Brian",
           pComp: 0,
           pGroup: 1,
           pParent: 0,
           pOpen: 1,
           pDepend: "",
           pCaption: "",
           pCost: 1000,
           pNotes: "Some Notes text",
           category: "My Category",
           sector: "Finance",
           pGantt: g
         });

        g.Draw();

    </script>