Donut Update in Vue

<template>
  <div>
    <div>
      <div class="chart-wrap">
        <div id="chart">
          <apexchart
            type="donut"
            width="380"
            :options="chartOptions"
            :series="series"
          ></apexchart>
        </div>
      </div>

      <div class="actions">
        <button @click="appendData">+ ADD</button>

        <button @click="removeData">- REMOVE</button>

        <button @click="randomize">RANDOMIZE</button>

        <button @click="reset">RESET</button>
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [44, 55, 13, 33],
      chartOptions: {
        chart: {
          width: 380,
          type: 'donut',
        },
        labels: ['Stocks', 'Bonds', 'Real Estate', 'Cash'],
        title: {
          text: 'Portfolio Allocation',
        },
        dataLabels: {
          enabled: false,
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 200,
              },
              legend: {
                show: false,
              },
            },
          },
        ],
        legend: {
          position: 'right',
          offsetY: 0,
          height: 230,
        },
      },
    }
  },
  methods: {
    appendData: function () {
      var arr = this.series.slice()
      arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
      this.series = arr
    },

    removeData: function () {
      if (this.series.length === 1) return
      var arr = this.series.slice()
      arr.pop()
      this.series = arr
    },

    randomize: function () {
      this.series = this.series.map(function () {
        return Math.floor(Math.random() * (100 - 1 + 1)) + 1
      })
    },

    reset: function () {
      this.series = [44, 55, 13, 33]
    },
  },
}
</script>

<style>
#chart {
  max-width: 480px;
  margin: 35px auto;
  padding: 0;
}
.actions {
  top: -10px;
  position: relative;
  z-index: 10;
  max-width: 400px;
  margin: 0 auto;
}
button {
  color: #fff;
  background: #20b2aa;
  padding: 5px 10px;
  margin: 2px;
  font-weight: bold;
  font-size: 13px;
  border-radius: 5px;
}
p {
  margin: 10px 0;
}
@media only screen and (max-width: 480px) {
  .actions {
    margin-top: 0;
    left: 0;
  }
}
</style>