Axios not loading data to vue

Question

I am trying to load cytoscape graph using vue and axios. Anyway cant configure cytoscape so I tried first with axios and vue only. There is still problem with scope, but I can't figure where? What should I change? How to properly set vue and axios.

EDIT

So after setting this.nodes i would like to draw a grapg in cytoscape.js , but I always get errors:

-The style property text-outline-color: is invalid

-Do not assign mappings to elements without corresponding data (e.g. ele 6b899f09-359e-424d-9461-d71c8c3fcd3b for property text-outline-color with data field faveColor); try a [faveColor] selector to limit scope to elements with faveColor defined

-Uncaught TypeError: Cannot set property 'mapping' of null

I believe it is array problem, but I can't figure out how to set array properly so this can work.

Here is code:

draw: function(){

    this.cy = cytoscape({
            container: document.getElementById('cy'),
              layout: {
                name: this.main_layout,
                padding: 10
              },
              style: cytoscape.stylesheet()
                .selector('node')
                  .css({
                    'shape': 'data(faveShape)',
                    'width': 'mapData(weight, 40, 80, 20, 60)',
                    'content': 'data(name)',
                    'text-valign': 'center',
                    'text-outline-width': 2,
                    'text-outline-color': 'data(faveColor)',
                    'background-color': 'data(faveColor)',
                    'color': '#fff'
                  })
                .selector(':selected')
                  .css({
                    'border-width': 3,
                    'border-color': '#333'
                  })
                .selector('edge')
                  .css({
                    'curve-style': 'bezier',
                    'opacity': 0.666,
                    'width': 'mapData(strength, 70, 100, 2, 6)',
                    'target-arrow-shape': 'triangle',
                    'source-arrow-shape': 'circle',
                    'line-color': 'data(faveColor)',
                    'source-arrow-color': 'data(faveColor)',
                    'target-arrow-color': 'data(faveColor)'
                  })
                .selector('edge.questionable')
                  .css({
                    'line-style': 'dotted',
                    'target-arrow-shape': 'diamond'
                  })
                .selector('.faded')
                  .css({
                    'opacity': 0.25,
                    'text-opacity': 0
                  }),
              elements: {
                nodes: this.nodes

              },

              ready: function(){
                window.cy = this;
              }
          });

Answer 1

I assume that response.data is an array or object ans vm.projekt with null there is no vue-getter registred. So please try to do

Vue.set(vm, 'projekt', response.data) there is also a $set in every vue instance (this)

instead of

vm.projekt = response.data

In general i would advise you to push ajax-datas into reactive arrays, that works very well.