I am trying to create a web app based on a database. Setup: NodeJS and a Vuejs 2 app generated with the CLI (with Webpack). Currently, I am using axios to retrieve records into an object. Based on that object I want to draw some svg lines from certain points to other points. The method works completely as designed when running it from an @click (v-on directive). However, when I try to add it to the created hook it doesn't work. No errors displayed. It's just not running. Does anyone no why? Code example below.

<template>
<div class="holder">
  <step v-for="item in steps"></step>
  <events v-for="point in points"></events>
  <button @click= "createArrows">Test</button>
</div>
</template>

<script>
import axios from 'axios'
import Step from './Step.vue'
import Events from './Events.vue'

export default {
name: 'Graph',
data () {
  return {
    steps: '',
    events: '',
    points: []
},

components: {
  Step, Events
},
methods: {
  getSteps: function() {
    let getsteps = this
    axios.get('localhost:8000/api/steps')
          .then(function (response) {
            getsteps.steps = response.data
          })
          .catch(function (error) {
            getsteps.steps = "Invalid request"
          })
  },
  getEvents: function() {
        let getevents = this
        axios.get('localhost:8000/api/events')
              .then(function (response) {
                getevents.events = response.data
              })
              .catch(function (error) {
                getevents.events = "Invalid request"
              })

    },
  createArrows: function() {
  },
created() {
  this.getSteps(),
  this.getEvents(),
  this.createArrows()
}


}

EDIT: Promises are already included in the axios library. Since I am new to this concept I missed this one. Refactored code below:

methods: {
getData: function() {
  let getdata = this
  axios.all([
          axios.get('localhost:8000/api/steps'),
          axios.get('localhost:8000/api/events')
        ])
        .then(axios.spread(function (stepResponse, eventResponse) {
          console.log('success')
          getdata.steps = stepResponse.data
          getdata.events = eventResponse.data
          getdata.createArrows()
        }))
        .catch(function (error) {
          console.log("Invalid request")
        })
},
createArrows: function() {
  }
},
created() {
this.getData()
}


}
</script>