Hola. Estoy necesitando graficar con highchart y Vue. Los datos para graficar vienen por api. Estoy usando Axios para graficar pero me re...

Hola.

Estoy necesitando graficar con highchart y Vue. Los datos para graficar vienen por api.

Estoy usando Axios para graficar pero me responde que no reconoce la variable.

¿En que estoy fallando?

Es importante!! gracias!

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
  <!-- NPM de el highcharts para VUE -->
<script src="https://cdn.jsdelivr.net/npm/highcharts/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-highcharts/dist/vue-highcharts.min.js"></script>

  <!--
<script src="https://code.highcharts.com/highcharts.js"></script>
-->
<script type="text/javascript" src="https://cdn.rawgit.com/highcharts/highcharts-vue/1ce7e656/dist/script-tag/highcharts-vue.min.js"></script>



<div id="app">
  <div class="title-row">
    <p>Haciendo pruebas de graficos</p>
  </div>

  <highcharts :options="chartOptions"></highcharts>

</div>

<hr>
<p>Probando llegada de datos</p>
{{barra.total}}

<hr>
{{barra.fecha}}
<hr>


<style media="screen">
.title-row {
display: flex;
flex-direction: column;
align-items: center;
background: #eee;
padding: 20px;
}
</style>

<!-- ESTA CARGADA LA VERSION DE VUE PARA PRODUCCION
-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">


Vue.use(HighchartsVue.default)

var app = new Vue({
  el: '#app',
  data: {
   barra: null,
   mensaje: null
 },
//filters: {
//  currencydecimal (value) {
//    return value.toFixed(2)
//    }
//  },

created() {
  this.pedidoJson();
},
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Vue y Highcharts'
        },
        series: [{
          data: [10, 0, 8, 2, 6, 4, 5, 5]
        }]
      },
    }
  },
  methods: {
    pedidoJson: function(){
      axios.get('https://desa-tablero-asistire.educar.gob.ar/servicios/asist_institucion.php')
        .then(response => (
          //alert("hizo el pedido json")
          //alert(response.data.fecha)
         this.barra = response.data
        ))
        .catch(error => {
          alert("Error del pedido por axios a la api")
          this.errored = true
        })
    }
  }
})



</script>