Method not working from created hook Vue.js

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() {
    let targetids = []
    let sourceids = []
    for (let i = 0; i < this.events.length; i++) {
      targetids.push(this.events[i].target_id)
      sourceids.push(this.events[i].source_id)
    }

    let stepids = []
    let tops = []
    let lefts = []
    for (let i = 0; i < this.steps.length; i++) {
      stepids.push(this.steps[i]._id)
      tops.push(this.steps[i].top)
      lefts.push(this.steps[i].left)
    }


    const blockwidth = 300
    const blockheight = 110
    const margin = 20
    let idx = 0
    let sourcelocX = 0
    let sourcelocY = 0
    let targetlocX = 0
    let targetlocY = 0

    for (let i = 0; i < this.events.length; i++) {
      idx = stepids.indexOf(sourceids[i])
      sourcelocX = Number(lefts[idx]) + Number(blockwidth)
      sourcelocY = Number(tops[idx]) + 0.5 * Number(blockheight)
      idx = stepids.indexOf(targetids[i])
      targetlocX = Number(lefts[idx])
      targetlocY = Number(tops[idx]) + 0.5 * Number(blockheight)
      let line = sourcelocX+ ',' + sourcelocY + ' ' +
                (sourcelocX+margin) + ',' + sourcelocY + ' ' +
                (targetlocX-margin) + ',' + targetlocY + ' ' +
                targetlocX + ',' + targetlocY
      let triangle = (targetlocX-10) + ',' + (targetlocY-7) + ' ' +
                      (targetlocX-10) + ',' + (targetlocY+7) + ' ' +
                      targetlocX + ',' + targetlocY
      this.points.push([line,triangle])
    }
  },
created() {
  this.getSteps(),
  this.getEvents(),
  this.createArrows()
}


}

via Imre_G