Используйте кнопку для добавления данных в массив объекта

Question

Мне нужна помощь с чем-то, что кажется простым, но все же я ломаю голову.Можете ли вы с директивой v-btn вывести массив объектов в формате JSON?

Я пытался искать в Интернете, но не повезло, что любая помощь будет принята.

С уважением

Виндикокимбер

https://codepen.io/Ryan_Kimber/pen/51345fef1a585cc2d78f8f1eef8407fd

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="app">
  <v-container>
    <v-layout row wrap>
      <v-flex xs2 sm2 md2>
        <v-text-field id="name" label="Name" v-model="name" @input="up"></v-text-field>
        <v-flex xs3>
          name: {{name}}
        </v-flex>
      </v-flex>
      <v-flex xs1 sm2 md2>
        <v-text-field id="ob" label="Overs bowled" v-model="oversbowled" @input="up"></v-text-field>
        <v-flex xs3>
          oversbowled: {{oversbowled}}
        </v-flex>
      </v-flex>
      <v-text-field id="ob2" label="Overs Bowled(v2)" v-model="oversbowled2" @input="up"></v-text-field>
      <v-flex xs3>
        oversbowled2: {{oversbowled2}}
      </v-flex>
      <v-flex xs1 sm1 md1>
        <v-btn @click="userdata">Add row</v-btn>
      </v-flex>
      <div id="chartdiv">
        <v-flex xs6 sm6 md6>
          <template>
  <div id = "table">
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

      </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      function() {

      },
      name: [],
      oversbowled: [],
      oversbowled2: []
    };
  },
})
//Chart instance
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "year": 2003,
  "europe": 2.5,
  "namerica": 2.5,
  "asia": 2.1,
  "lamerica": 1.2,
  "meast": 0.2,
  "africa": 0.1
}, {
  "year": 2004,
  "europe": 2.6,
  "namerica": 2.7,
  "asia": 2.2,
  "lamerica": 1.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": 2005,
  "europe": 2.8,
  "namerica": 2.9,
  "asia": 2.4,
  "lamerica": 1.4,
  "meast": 0.3,
  "africa": 0.1
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.title.text = "Expenditure (M)";

// Create series
function createSeries(field, name, stacked) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
  series.stacked = stacked;
  series.columns.template.width = am4core.percent(95);
}

createSeries("europe", "Europe", false);
createSeries("namerica", "North America", true);
createSeries("asia", "Asia", false);
createSeries("lamerica", "Lating America", true);
createSeries("meast", "Middle East", true);
createSeries("africa", "Africa", true);

// Add legend
chart.legend = new am4charts.Legend();