Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Example Vue + DataTables</title>
  <!-- I happened to be using the bootstrap styling w/ DataTables. You may not need this. -->
  <link rel="stylesheet" href="/path/to/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
</head>
<body>
  <div id="example-page">

    <div v-show="isFirstDataLoaded" style="display:none">
      <table id="personsTable" class="table table-striped table-bordered table-responsive table-sm" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>zip</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>zip</th>
          </tr>
        </tfoot>
        <tbody>
          <tr v-for="p in persons" :id="'row-'+p.personId">
            <td v-text="p.personId"></td>
            <td v-text="p.name"></td>
            <td v-text="p.address"></td>
            <td v-text="p.zip"></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div><!-- example-page -->

  <script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
  <script type="text/javascript" src="/path/to/vue-datatables-example.js"></script>

</body>
</html>