vue-chartjsでグラフの表示を行いたい

Question

vue-chartjsでのグラフの表示

現在vue.jsを用いてwebアプリを開発しています。
グラフを作成するためにvue-chartjs(chart.js)を利用しているのですが、グラフを表示させることができません。
次のようなメモリのみの表示になってしまいます。

ご教授お願いいたします。

該当のソースコード

公式ドキュメントを参考に以下のようなプログラムを作成しました。

データ管理部のコンポーネント

<script>
import { HorizontalBar } from 'vue-chartjs';

export default {
  extends: HorizontalBar,
  data: () => ({
    chartdata: {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),
}
</script>

グラフ表示部のコンポーネント

<template>
  <div id="app">
    <h1>グラフの表示</h1>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './BarChart.vue';

export default {
  components: {
    Chart,
  },
}
</script>

補足情報

"chart.js": "^2.8.0",
"vue": "^2.5.2",
"vue-chartjs": "^3.4.2",