How to implement a table component with different border colors in different contexts using BEM and component approach in Vue?

To implement a table with different border colors in various contexts using BEM and a component-based Vue approach, you can do the following:

1. Define a base table component with a block class, for example, table.
2. Create modifiers for different contexts, such as table--primary, table--secondary.
3. In CSS, describe styles for these modifiers, setting the desired border colors.
4. In the Vue component, accept a context prop and dynamically add the corresponding class.

Example:

<template>
  <table :class="['table', `table--${context}`]">
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__cell">Header</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <td class="table__cell">Data</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>

This approach maintains BEM semantics, makes it easy to extend styles for new contexts, and supports component reusability.