Send data to another javascript library with vue

With vue, I create a json file with classic asp from Sql Server and import the data. My goal is to place the data I have received on the page and in apexCharts.

The html page I used, getData.js and json from dataSql.asp is as follows.

index.html

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="vue.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <style>      textarea {        position: fixed;        right: 0;        top: 0;        width: 300px;        height: 400px;      }    </style>
  </head>
  <body>
    <div id="app">
      <form id="urlParameterForm">
        <input type="date" name="startDate" id="startDate" />
        <input type="date" name="endDate" id="endDate" />
        <input
          type="number"
          name="pageNumber"
          id="pageNumber"
          value="1"
          v-on:input="changePage"
        />
        <input
          type="button"
          value="Filter"
          id="Filter"
          v-on:click="changeFilter"
        />
        <p>Page : {{ pageActive }}</p>
      </form>

      <h3>{{title}}</h3>
      <div v-for="dta in dataTable.sqlData">
        Height: {{dta.height}}, Type: {{dta.type}}

        <ul v-for="dta in dataTable.sqlData.graphData">
          <li>{{dta.categorie}} - {{dta.serie}}</li>
        </ul>
      </div>

      <textarea>
        {{dataTable}}
      </textarea>
    </div>

    <script src="getData.js"></script>
  </body>
</html>

getData.js

const app = new Vue({
    el: "#app",
    devtools: true,
    data: {
        dataTable: [],
        pageNumber: 1,
        pageActive :0,
        title:'Graph-1'
    },
    
    computed: {
        url() {
          return './dataSql.asp?pg=' + this.pageNumber
        }
    },
  
  
    methods: {

        changePage: function (event) {
            console.log('Change Page',this.pageNumber);
            this.pageNumber = event.target.value;
            this.init();
        },

        changeFilter: function (event) {
            console.log('Change Filter');
            this.init();
        },


        init() {
            let that = this;

            console.log('init call');
            $.ajax({
                type: "POST",
                url: that.url,
                data:{
                    startDate:$('#startDate').val(),
                    endDate:$('#endDate').val(),
                    pageNumber:$('#pageNumber').val()
                },
                success: function (data) {
                    console.log('data remote call');
                    console.log(data.sqlData);
                    that.dataTable = data.sqlData;
                }
            });

            
        }
    },
    

    mounted() {
        this.init()
    }

})

dataSql.asp response json

        [
  {
    "height": 350,
    "type": "bar",
    "graphData": [
      {
        "categorie": "Bursa",
        "serie": 4
      },
      {
        "categorie": "Tekirdağ",
        "serie": 3
      }
    ]
  }
]

When I run the page, the screen calls the data like this and I see the data coming as json.

Under the graph-1 text, the does not show anything as if I have never written this. But I can print json text in the text field as it appears in the upper right corner.

      <div v-for="dta in dataTable.sqlData">
        Height: {{dta.height}}, Type: {{dta.type}}

        <ul v-for="dta in dataTable.sqlData.graphData">
          <li>{{dta.categorie}} - {{dta.serie}}</li>
        </ul>
      </div>

    <textarea>
        {{dataTable}}
      </textarea>

I actually want to assign this data, which I could not show on the page, to x and y variables here.

I need something like the following.

categories: app.dataTable.graphData.categorie;
series: app.dataTable.graphData.serie;

var barBasicChart = {
  chart: {
    height: 350,
    type: 'bar',
  },
  plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: false
  },
  series: [{
    data: [4,3]  /* vue - json - graphData.serie */
  }],
  xaxis: {
    categories: ['Bursa','Tekirdağ'], /* vue - json - graphData.categories */
  },
  fill: {
    colors: $themeColor
  }
}


// Initializing Bar Basic Chart
var bar_basic_chart = new ApexCharts(
  document.querySelector("#denemeGrafik"),
  barBasicChart
);
bar_basic_chart.render();

Vue seems to have not been developed for a long time. I'm new to vuede too. My goal is to automatically generate html content from json. To change the variables of the scripts I have used (such as apexcharts, xGrid etc.).

Can you suggest if there is another javascript library that I can do these things with?

Except for React and Angular because these two are hard to understand and write.

Solution

Your AJAX callback assigns dataTable to data.sqlData:

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data.sqlData;
  }
})

Then, your component tries to render dataTable.sqlData, but sqlData was already extracted in the AJAX callback (dataTable is an Array):

<div v-for="dta in dataTable.sqlData">
                             ^^^^^^^ ❌

Solution: You can either update the AJAX callback to return the full response (including sqlData):

$.ajax({
  //...
  success: function (data) {
    that.dataTable = data;
  }
})

...or update the template to not dereference sqlData, using dataTable directly:

<div v-for="dta in dataTable">