javascript - 「apexcharts を使用して散布図にデータをプロットする方法」

Question

Vue.js散布図にデータをプロットするためにapexchart ライブラリを使用しています。Python と Flask を使用して、バックエンドからデータを取得しています。バックエンドからフロントエンドにデータを取得できますが、散布図には何も表示されず、コンソールにもエラーはありません。期待される結果は、バックエンド、つまり .py ファイルから取得したすべての座標値を含む散布図になるはずです。

<template>
<div>
   <div id="chart">
      <apexchart type=scatter height=350 :options="chartOptions" :series="series" />
    </div>
    <div>
        <p> {{ df }} </p>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import VueApexCharts from 'vue-apexcharts';
import Vue from 'vue';

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)


export default {
    data: function() {
      return {
        df: [],
        chartOptions: {
          chart: {
            zoom: {
              enabled: true,
              type: 'xy'
            }
          },


          xaxis: {
            tickAmount: 3,
          },
          yaxis: {
            tickAmount: 3,
          }
        },
        series: [{
          name: 'series-1',
          data: [[]]
      }],
      }
      },
    methods: {
        getPoints() {
            const path='http://localhost:5000/scatter';
            axios.get(path)
            .then((res) => {
                this.df=res.data;
                console.log(this.df)
            })
            .catch((error) => {
                console.error(error);
            });
        },

    },
    created(){
        this.getPoints();
    },
};

</script>


#Backeend (.py file)

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
app.config.from_object(__name__)

@app.route('/scatter',methods=['GET'])
def get_points():
    return jsonify([[2, 3], [1, 5]])

ブラウザで取得している結果