TableErrors.js

// It's a plain javascript file vue component
// It should work for tests with mocha + JSDom
export default {
  props: ['table'],
  template: `
<div>
  <table class="error">
    <thead>
      <tr>
        <th>Row</th>
        <th>Col</th>
        <th>Code</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="error of table.errors">
        <td>{{ error['row-number'] || 'H' }}</td>
        <td>{{ error['column-number'] || '-' }}</td>
        <td>{{ error.code }}</td>
        <td>{{ error.message }}</td>
      </tr>
    </tbody>
  </table>
</div>
`
}

TableErrors.vue

<script>
// It's a one-file vue component
// It should work for tests with mocha+karma+webpack
// https://vue-loader.vuejs.org/en/workflow/testing.html
export default {
  props: ['table'],
}
</script>

<template>
<div>
  <table class="error">
    <thead>
      <tr>
        <th>Row</th>
        <th>Col</th>
        <th>Code</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="error of table.errors">
        <td>{{ error['row-number'] || 'H' }}</td>
        <td>{{ error['column-number'] || '-' }}</td>
        <td>{{ error.code }}</td>
        <td>{{ error.message }}</td>
      </tr>
    </tbody>
  </table>
</div>
</template>