Vue.jsでvue-google-chartを使ってtimelineのグラフを使用したい

以下vue-google-chartのnpmに載っているbarチャートのexampleです。　
最下に自分の詰まっているコードも載せておきます。よろしくお願いします。

Vue
1<template>
2  <div id='app'>
3  <GChart
4    :settings="{packages: ['bar']}"    
5    :data="chartData"
6    :options="chartOptions"
7    :createChart="(el, google) => new google.charts.Bar(el)"
8    @ready="onChartReady"
9  />
10  </div>
11</template>
12
13<script>
14import { GChart } from 'vue-google-charts'
15export default {
16  name: 'App',
17  components: {
18    GChart
19  },
20  data () {
21    return {
22      chartsLib: null, 
23      // Array will be automatically processed with visualization.arrayToDataTable function
24      chartData: [
25        ['Year', 'Sales', 'Expenses', 'Profit'],
26        ['2014', 1000, 400, 200],
27        ['2015', 1170, 460, 250],
28        ['2016', 660, 1120, 300],
29        ['2017', 1030, 540, 350]
30      ]
31    }
32  },
33  computed: {
34    chartOptions () {
35      if (!this.chartsLib) return null
36      return this.chartsLib.charts.Bar.convertOptions({
37        chart: {
38          title: 'Company Performance',
39          subtitle: 'Sales, Expenses, and Profit: 2014-2017'
40        },
41        bars: 'horizontal', // Required for Material Bar Charts.
42        hAxis: { format: 'decimal' },
43        height: 400,
44        colors: ['#1b9e77', '#d95f02', '#7570b3']
45      })
46    }
47  },
48  methods: {
49    onChartReady (chart, google) {
50      this.chartsLib = google
51    }
52  }
53}
54</script>

これが組み合わせたいTimelinechartです。googlechartの公式ドキュメントです。

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

Vue
1<template>
2  <div id='app'>
3  <GChart
4    :settings="{packages: ['timeline']}" 
5    type="Timeline"   
6    :data="chartData"
7    :options="chartOptions"
8    :createChart="(el, google) => new google.charts.Timeline(el)"
9    @ready="onChartReady"
10  />
11  </div>
12</template>
13
14<script>
15import { GChart } from 'vue-google-charts'
16export default {
17  name: 'App',
18  components: {
19    GChart
20  },
21  data () {
22    return {
23      chartsLib: null, 
24      // Array will be automatically processed with visualization.arrayToDataTable function
25      chartData: [
26        [
27          { type: 'string', id: 'President' },
28          { type: 'date', id: 'Start' },
29          { type: 'date', id: 'End' }
30        ],
31          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
32          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
33          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]
34      ]
35    }
36  },
37  computed: {
38    chartOptions () {
39      // if (!this.chartsLib) return null
40      // return this.chartsLib.charts.Bar.convertOptions({
41      //   chart: {
42      //     title: 'Company Performance',
43      //     subtitle: 'Sales, Expenses, and Profit: 2014-2017'
44      //   },
45      //   bars: 'horizontal', // Required for Material Bar Charts.
46      //   hAxis: { format: 'decimal' },
47      //   height: 400,
48        colors: ['#1b9e77', '#d95f02', '#7570b3']
49      // })
50    }
51  },
52  methods: {
53    onChartReady (chart, google) {
54      this.chartsLib = google
55    }
56  }
57}
58</script>