title: Series is not updating in Apexchart for Vue.js
body: <p>I am trying to make a piechart for a data record that contains a financial plan for students (rent, tuition, food, etc.) to help them visualize their spending and expenses. I am running into an issue where the series and labels for apexchart are not updating after I push data from the plans into the arrays. I am not getting any error messages in the console so I was wondering if anyone knew what I was doing wrong here. here is the current code:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;p&gt; &lt;b&gt;Your Plan: &lt;/b&gt; {{plan.planName}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;chart&quot;&gt;
      &lt;apexchart type=&quot;pie&quot; width=&quot;380&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import axios from &quot;axios&quot;;
  
  export default {
  
  computed:{
  plan(){
      let allPlans = this.$store.state.plans;
  
      let thisPlan = allPlans.find((aPlan)=&gt;{return aPlan.planID == this.$route.params.pk});
  
      return thisPlan;
  }
  },
  
    data() {
     return {
                  series: [],
                  chartOptions: {
                      chart: {
                          width: 380,
                          type: &quot;pie&quot;,
                          toolbar: {
                              show: true,
                          },
                      },
                      title: {
                          text: 'Breakdown of Your Plan',
                          align: 'center',
                          style: {
                              color: '#000',
                          },
                      },
                      labels: [],
                      responsive: [
                          {
                              breakpoint: 480,
                              options: {
                                  chart: {
                                      width: 250,
                                  },
                                  legend: {
                                      position: 'bottom',
                                  },
                              },
                          },
                      ],
                      legend: {
                          labels: {
                              colors: '#000',
                          },
                      },
                  },
              }
    },
  
     mounted() {
      axios.get(`/plans/${this.$route.params.pk}/dashboard`).then((response) =&gt; {
          console.log(&quot;so heres the plan&quot;, response)
        for (let i = 0; i &lt; response.data.length; i++) {
          this.data.series.push(response.data[i].value);
          this.data.chartOptions.labels.push(response.data[i].key);
          }
      }).then(console.log(&quot;now heres the series&quot;, this.series))
    },
  } 
   &lt;/script&gt;
  </code></pre>