When using the table component of element-ui, the front end cannot get the data dynamically

I want to implement a function to view history. The table currently has only three columns, as follows

uses the table component of element-ui. Now the server can get the data from the database, and the front-end console can print the data, but the front-end page does not display the data. In addition, the console will report this error: Uncaught DOMException: Failed to execute "setEnd" on" Range": There is no child at offset 1

the front-end code is as follows:

<template>
...
          <div>
            <el-table
            :data="tableData3"
            border
            style="width: 100%">
            <el-table-column
              prop="experiment_name"
              label="Experiment Name"
              v-model="tableData3.experiment_name"
              width="180">
            </el-table-column>
            <el-table-column
              prop="modified_date"
              label="Modified Date"
              v-model="tableData3.modified_date"
              width="180">
            </el-table-column>
              <el-table-column
                prop="content"
                label="Content"
                v-model="tableData3.content"
                width="180">
              </el-table-column>
            </el-table>
  ...
</template>

<script>
...

    export default{
      data() {
        return {
          tableData3: [{
            experiment_name: "",
            modified_date: "",
            content: ""
          }]
        }
      },

      mounted: function(){
        this.getAbHistory();
      },

      methods:{
        getAbHistory(){
          axios.get("/historyScan/AbHistory").then(result =>{
            var res = result.data;
            if(res.status == "0"){
              let values = res.result.hbaseRst;
              let values_length = values.length;
              
              this.tableData3.experiment_name= values[0].key;
              this.tableData3.modified_date = values[0].timestamp;
              this.tableData3.content = values[0].$;
              console.log("Experiment Name is " + this.tableData3.experiment_name);
              console.log( "Modified date is " + this.tableData3.modified_date);
              console.log("content is "+ this.tableData3.content);
            }
            else{
              this.$message.error("A/B test ");
            }
          });
        }
      }

    }
</script>

the code on the server side is as follows:

let express = require("express");
let router = express.Router();
let path = require("path");
let formidable = require("formidable");
let fs = require("fs");
let assert = require("assert");
let  hbase = require("hbase");

let client = hbase({
  host:"localhost",
  port:8010
});

router.get("/", function(req, res, next) {
  res.send("this is our history");
});

router.get("/AbHistory", function(req, res, next) {
  // scan hbase
  client
    .table("treatment_store")
    .scan({
      maxVersions: 1
    }, function(err, values){
      if (err === null) {
        console.log(err, values);
        res.json({
          status: "0",
          msg: "",
          result:{
            hbaseRst:values
          }
        });
      }
      else {
        res.json({
          status:"1",
          msg:"",
        });
      }
    });
});

module.exports = router;

After

scan Hbase, you get an array of hbaseRst, including the row key, timestamp, of hbase and the data:

[{ key: "tantan-rec-male-mlc9990",
  column: "f:content",
  timestamp: 1526974180912,
  "$": "{"experiment_name":"test","experiment_id":1,"hash_id":"222222","whitelists":[{"user_ids":[22],"treatment":"adf"}],"ramp":[{"treatment":"adf","percentage":100}]}" }]

currently I just want to display the row key, timestamp, data in the table above. Big God, can you see what the reason for this mistake is?
Uncaught DOMException: Failed to execute "setEnd" on" Range": There is no child at offset 1