外部ファイルのデータを使用して描画したグラフがあります。次に、ユーザーが読み取るファイルを選択できる選択ボックスが必要です。このようにして、チャートを動的に変更できます。 vue と chartjs を使用してこの機能を実現するにはどうすればよいですか?

現在、ホームに次のようにデータをインポートしています。

<テンプレート> 
 <グラフ :vul_data="データ"/> 
  <スクリプト> import { Component, Prop, Vue } from 'vue-property-decorator'; '@/components/Graph.vue' からグラフをインポートします。 '@/data/dataFile.js' から {data} をインポートします @成分（{ コンポーネント: { グラフ、 }、 }) デフォルトクラス HomeView をエクスポートして Vue を拡張 { データ（） { 戻る { データ: データ、 } } } 

各ファイルのデータは次のとおりです。

const データのエクスポート = { 「ポイント」: { "ライン1"： { "バツ"： [ -11、 -11、 ]、 "y": [ 7、 8、 】 }、 }、 }

コンポーネントは次のとおりです。

<テンプレート> 
  
  <スクリプト> 「chart.js/auto」からチャートをインポートします。 デフォルトをエクスポート{ 名前: "グラフ"、 小道具: ["vul_data"], マウントされた(){ const ctx = document.getElementById('myChart'); const myChart = 新しいチャート(ctx, { タイプ: '散布'、 データ： { データセット: [{ ラベル: '行 1'、 データ：[ {x: this.vul_data.points.line1.x[0], y: this.vul_data.points.line1.y[0]}, {x: this.vul_data.points.line1.x[1], y: this.vul_data.points.line1.y[1]}, ]、 }、 】 }、 }); } } 
      <スタイル>