How to populate an array BEFORE mounted lifecycle hook

Question

I have a simple API call in getFeedingsAgain. I am calling it inside "beforeMount" yet I can see via my console.logs that my data value for "catFeedingsAgain" stays empty once "mounted" is called. I am trying to populate the catFeedingsAgain array BEFORE the component's "mounted()" lifecycle hook is called so a function I have inside the "mounted()" hook can use that array data. How can I make this work?

Thank you for your time.

UPDATED: including entire component code now.

NOTE: I am basically trying to replace the initial array within Amcharts...Line Chart #2...."dataProvider" with the resultant array from the API call in getFeedingsAgain.

```

<template>
  <!-- second chart group -->
  <div class="chart-block" style="padding-top:50px">
    {{ message }}
    <div ref="line" style="vertical-align: middle; display: inline-block; width: 50%; height: 30px;"></div>
    <div ref="column" style="vertical-align: middle;display: inline-block; width: 50%; height: 30px;"></div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    props: ['message'],
    name: 'app',
    computed:{

    },
    created(){
      this.getFeedingsAgain(this.message);
    },
    data() {
      return {
        chartCatID: this.message,
        catFeedingsAgain: [],
        catMedicationsAgain: [],
      }
    },
    mounted () {
      /**
       * Line Chart #2
       */
      // this.getFeedingsAgain(this.message);
      console.log("mounted");
      console.log(this.catFeedingsAgain);
      // TODO: line = weight(waf) / day(created?)
      AmCharts.makeChart( this.$refs.line, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "weight_after_food": 120
        }, {
          "day": 2,
          "weight_after_food": 54
        }, {
          "day": 3,
          "weight_after_food": -18
        }, {
          "day": 4,
          "weight_after_food": -12
        }, {
          "day": 5,
          "weight_after_food": -51
        }, {
          "day": 6,
          "weight_after_food": 12
        }, {
          "day": 7,
          "weight_after_food": 56
        }, {
          "day": 8,
          "weight_after_food": 113
        }, {
          "day": 9,
          "weight_after_food": 142
        }, {
          "day": 10,
          "weight_after_food": 125
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 5,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "weight_after_food",
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "guides": [ {
            "weight_after_food": 0,
            "lineAlpha": 0.1
          } ]
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "startOnAxis": true
        }
      } );

      /**
       * Column Chart #2
       */
      // TODO: column = dose(dosage) / day(created?)
      AmCharts.makeChart( this.$refs.column, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "value": -5
        }, {
          "day": 2,
          "value": 3
        }, {
          "day": 3,
          "value": 7
        }, {
          "day": 4,
          "value": -3
        }, {
          "day": 5,
          "value": 3
        }, {
          "day": 6,
          "value": 4
        }, {
          "day": 7,
          "value": 6
        }, {
          "day": 8,
          "value": -3
        }, {
          "day": 9,
          "value": -2
        }, {
          "day": 10,
          "value": 6
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 0,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "value",
          "type": "column",
          "fillAlphas": 1,
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeFillColors": "#289eaf",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0
        }
      } );
    },
    methods:{
      getFeedingsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
          .then(response => {
            console.log("getFeedingsAgain: ");
            console.log(response.data.results);
            this.catFeedingsAgain = response.data.results
          })
          .catch(error => console.log(error));
      },
      getMedicationsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/medications/?cat__slug=&cat__name=${value}`)
          .then(response => {console.log("catMedications: ");console.log(response.data.results); this.catMedications = response.data.results})
          .catch(error => console.log(error));
      },
    }
  }
</script>

<style>
  .amcharts-chart-div a{
    text-indent: -9999px;
    outline: none;
  }
</style>

```

Answer 1

You could also create a watcher, to perform an action when the variable changes.

something like this

watch: {
  catFeedingsAgain: function() {
    AmCharts.makeChart( this.$refs.line, {
      "type": "serial",
      "dataProvider": this.catFeedingsAgain,
      ...
    });
  }
},

you can find the documentation here; https://v2.vuejs.org/v2/guide/computed.html#Watchers