logdog90

Cannot read properties of undefined (reading 'lastname')

Понятно, смотрим, где есть попытка чтения свойства lastname.

async addNewEmployee({ commit }, employee) {
    await axios
        .post(`http://127.0.0.1:8000/api/v1/employees/`, {
            lastname: employee.lastname,

Тоже понятно, смотрим, где вызывается addNewEmployee и что туда передаётся.

@submit.prevent="addNewEmployee(employee)"

А вот здесь непонятно - что такое employee? Такого свойства в компоненте нет. Надо добавить. Его содержимым будет то, что сейчас находится в хранилище - firstname, lastname, number - там, в хранилище, этим данным делать нечего.

Действия пусть будут представлены в виде массива строк:

data: () => ({
  employees: [
    { ..., actions: [ 'delete', 'ещё что-то', 'и ещё' ] },
    ...
  ],
  ...

Таблицу оформить как отдельный компонент; для каждого из столбцов выделить отдельный слот, в который будут передаваться данные строки и столбца, их индексы; по умолчанию слоты выводят данные как они есть:

props: {
  columns: Array,
  data: Array,
},

<table>
  <thead>
    <tr>
      <th v-for="(col, colIndex) in columns" :key="col.key">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in data" :key="row.id">
      <td
        v-for="col in columns"
        :key="col.key"
        :data-label="col.label"
      >
        <slot
          :name="`column.${col.key}`"
          :col-data="col"
          :col-index="colIndex"
          :row-data="row"
          :row-index="rowIndex"
        >
          {{ row[col.key] }}
        </slot>
      </td>
    </tr>
  </tbody>
</table>

Ну а дальше просто передавайте в слот столбца actions соответствующие кнопки:

<v-table :columns="titles" :data="employees">
  <template #column.actions="{ rowData, rowIndex }">
    <div>
      <button
        v-for="action in rowData.actions"
        v-text="action"
        @click="onActionClick(action, rowData, rowIndex)"
      ></button>
    </div>
  </template>
</v-table>

methods: {
  onActionClick(action, row, index) {
    switch (action) {
      case 'delete':
        this.employees.splice(index, 1);
        return;

      case 'ещё что-то':
        this.сделатьЧтоТоЕщё(row);
        return;
    }
  },
  ...