javascript - Vue.js プロジェクトに Apexcharts 棒グラフが表示されない

Question

Apexchartsを使用して vue.js サイトのグラフを作成しようとしていますが、グラフがまったく表示されません。

-Apexcharts のドキュメントはこちら

HTML

  <div class="section sec2"> 
    <div id="chart"></div>
    {{chart}} <--failed attempt
  </div>
...

JavaScript

<script>
import ApexCharts from 'apexcharts'
export default {
  // name: 'HelloWorld',
  props: {//////////this is how i use global variable with vue.js///////////////
    width:{           type: String, default: function(){return('width:')}},
  }
}
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30,40,45,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

CSS

<style>
  @import '../assets/style/sec.css';
#chart {
  max-width: 650px;
  margin: 35px auto;
}

</style>

「var option = ...」を「option:...」に変更してvue.jsグローバル変数を使用しようとしましたが、エラーが発生するだけでした。

「#chart」IDを使用してdivに表示することを想定していると確信しています

どんな助けやアドバイスも大歓迎です、ありがとう。