title: Can't change my array, because I've got Scope Problems
body: <p>I don't know why but I have some problems with my Dashboard.
  So basically I want to create some fancy Donut Charts.
  For that I've prepared a dataset-Array where I put my numbers in. All that works.
  But when I get my data from the database I want to change the array, to update the Chart.
  This is where I have problems.</p>
  
  <p>So my data() looks like this:</p>
  
  <pre><code>data() {
    return {
      disturbances_category_0: [],
      disturbances_category_1: [],
      disturbances_category_2: [],
      disturbances_category_3: [],
      datasets: [
        {
          data: [20, 20, 10, 50], //HERE I HAVE TO CHANGE THE NUMBERS &lt;-------------
          backgroundColor: ["#A40000", "#580000", "#EC4A3B", "#179C7D"],
          hoverBackgroundColor: ["#ff1a1a", "#b30000", "#f4948b", "#66bfac"]
        }
      ],
      labels: ["Banana", "Apple", "Strawberry", "Cherry"],
      option: {}
    };
  },
  </code></pre>
  
  <p>And then there is my created()-Block, where I use Axios + Sequelize and Feathers to get my data:</p>
  
  <pre><code>created() {
    axios.get('http://localhost:3030/disruptions/', {
      params: {
        DisruptionCategory: 0
      }
    })
    .then((response) =&gt; {
      this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY 
      this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH
    })
    .catch((error) =&gt; {
        console.log(error.data);
    });
  
    //imagine that for the other fruits as well...
    console.log(this.datasets[0].data[0]);
  }
  </code></pre>
  
  <p>If I test this script I always get "20" as printout.
  I don't know why it doesn't change the datasets.data-Array ... I also tried out to use Array.push but... nothing happened..</p>
  
  <p>I'm sure I forgot something obvious... </p>