Как реализовать компонент таблицы с разными цветами бордера в разных контекстах, используя BEM и компонентный подход Vue?

Для реализации таблицы с разными цветами бордера в разных контекстах, используя BEM и компонентный подход Vue, можно сделать так:

1. Определить базовый компонент таблицы с классом блока, например, table.
2. Для разных контекстов создать модификаторы, например, table--primary, table--secondary.
3. В CSS описать стили для этих модификаторов, задавая нужные цвета бордера.
4. В компоненте Vue принимать проп context и динамически добавлять соответствующий класс.

Пример:

<template>
  <table :class="['table', `table--${context}`]">
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__cell">Заголовок</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <td class="table__cell">Данные</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    context: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<style scoped>
.table {
  border-collapse: collapse;
}
.table__cell {
  border: 1px solid;
  padding: 8px;
}
.table--primary .table__cell {
  border-color: blue;
}
.table--secondary .table__cell {
  border-color: green;
}
</style>

Такой подход сохраняет семантику BEM, позволяет легко расширять стили для новых контекстов и поддерживает переиспользуемость компонента.