kintoneでVue.jsとBootstrapを使用して、カスタマイズビューを作る

<div id="my-customized-view">
  <table border="1">
    <thead>
      <tr>
        <th>レコード番号</th>
        <th>会社名</th>
        <th>部署名</th>
        <th>担当者名</th>
        <th>住所</th>
      </tr>
    </thead>
    <tbody id="my-tbody">
    </tbody>
  </table>
</div>

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    if (event.viewId !== 5521696) {
        return;
    }

    var records = event.records;
    if (records.length === 0) {
        document.getElementById('my-customized-view').innerText = '表示するレコードがありません';
        return;
    }

    var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
    var myRecordSpace = document.getElementById('my-tbody');
    myRecordSpace.innerText = '';

    for (var i = 0; i < records.length; i++) {
        var record = records[i];
        var row = myRecordSpace.insertRow(myRecordSpace.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);

        var tmpA = document.createElement('a');
        tmpA.href = recUrl + record['レコード番号']['value'];
        tmpA.innerText = record['レコード番号']['value'];
        cell1.appendChild(tmpA);
        
        cell2.innerText = record['会社名']['value'];
        cell3.innerText = record['部署名']['value'];
        cell4.innerText = record['担当者名']['value'];
        cell5.innerText = record['住所']['value'];
    }
  });
})();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<style>
html {
  font-size :0.9rem;
}
</style>

<div class="container-fluid" id="app">
<div class="row">
<div class="col-12">
<table class="table table-dark table-striped">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">レコード番号</th>
      <th scope="col">会社名</th>
      <th scope="col">部署名</th>
      <th scope="col">担当者名</th>
      <th scope="col">住所</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="record in records">
      <td>
        <a v-bind:href="`/k/49/show#record=${record.レコード番号.value}`">
          <span class="recordlist-detail-gaia" style="margin-top: 0;"></span>
        </a>
      </td>
      <td>{{record.レコード番号.value}}</td>
      <td>{{record.会社名.value}}</td>
      <td>{{record.部署名.value}}</td>
      <td>{{record.担当者名.value}}</td>
      <td>{{record.住所.value}}</td>
    </tr> 
  </tbody>
</table>
</div>
</div>
</div>

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    // 対象のビュー以外は処理しない
    if (event.viewId !== 5521698) return event;
    var records = event.records;
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          records: records,
        }
      }
    });
    return event;
  });
})();