Vuejs and amcharts

I'm doing some graphics with amcharts and Vue (to do the ajax query) I would like to have vue in its method of created place the code of amcharts and that axios can assign the data to the dataProvider I leave an example of my code to see if they can guide me in the right direction

<div class="row">


<div id="prueba">
  <div class="col-sm-6">
    <ul class="list-group">
    </ul>
  </div>
  <div class="col-sm-6">
      <pre>[[$data]]</pre>
  </div>


</div>

</div>
<div class="row">
  <div id="chartdiv" class="chart"></div>
</div>


  <style>
  #chartdiv {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
  }
  </style>

  <!-- Resources -->
  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
  <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

  <!-- VUE  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>



    <script>
        var yson = '['
        var flag
        var urlPrueba = '/api-reporteria/cuota'
        function funcion(activacion,cuota)
        {
            for(var i in cuota){ // iterate over cuota obj
            flag = false
             if(cuota.hasOwnProperty(i)){ // hasOwnProperty is used to filter propertys from the object


               for(var j in activacion){ //inside, iterare over actividad
                 if(activacion.hasOwnProperty(j)){ //hasOwnProperty is used to filter propertys from the object

                   if(cuota[i].fecha == activacion[j].fecha){ // ask by date

                     yson += '{"fecha":"' + cuota[i].fecha + '","cuota":"' + cuota[i].cuota + '","cantidad":"' + activacion[j].cantidad +'"},'
                     flag=true

                   }

                 }
               }
             }
             if (flag == false){
               yson += '{"fecha":"' + cuota[i].fecha + '","cuota":"' + cuota[i].cuota + '","cantidad":"0"},'
             }
          }
          yson = yson.substring(0, yson.length - 1);
          yson += ']'
          yson = JSON.parse(yson)
          console.log(yson)
          return yson;
        }


        var chart = AmCharts.makeChart( "chartdiv", {
        "type": "serial",
        "addClassNames": true,
        "theme": "light",
        "autoMargins": false,
        "marginLeft": 30,
        "marginRight": 8,
        "marginTop": 10,
        "marginBottom": 26,
        "balloon": {
          "adjustBorderColor": false,
          "horizontalPadding": 10,
          "verticalPadding": 8,
          "color": "#ffffff"
        },

        "dataProvider": [],
        "startDuration": 1,
        "graphs": [ {
          "alphaField": "alpha",
          "balloonText": "<span style='font-size:12px;'>[[title]] para el [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
          "fillAlphas": 1,
          "title": "Activaciones",
          "type": "column",
          "valueField": "cantidad",
          "dashLengthField": "dashLengthColumn"
        }, {
          "id": "graph2",
          "balloonText": "<span style='font-size:12px;'>[[title]] para el [[category]]:<br><span style='font-size:20px;'>[[value]]</span> [[additional]]</span>",
          "bullet": "round",
          "lineThickness": 3,
          "bulletSize": 7,
          "bulletBorderAlpha": 1,
          "bulletColor": "#FFFFFF",
          "useLineColorForBulletBorder": true,
          "bulletBorderThickness": 3,
          "fillAlphas": 0,
          "lineAlpha": 1,
          "title": "Cuota",
          "valueField": "cuota",
          "dashLengthField": "dashLengthLine"
        } ],
        "categoryField": "fecha",
        "categoryAxis": {
          "gridPosition": "start",
          "axisAlpha": 0,
          "tickLength": 0
        },
        "export": {
          "enabled": true
        }
      } );



        var vue = new Vue({
          delimiters: ['[[', ']]'],
          el:'#prueba',
          created: function(){
            this.getAll();
          },


          data:{
            lista:[]
          },

          methods:{
            getAll:function(){
              axios.get(urlPrueba).then(response=>{
                this.lista=funcion(response.data.Activacion, response.data.Cuota)
                chart.dataProvider=this.lista
                chart.validateData()


              });
            }
          }
        });

        </script>

This works but I would like to do everything within my instance Vuejs