Как использовать один компонент vue файла в шаблоне лезвия laravel?

У меня есть простой компонент таблицы.

<template>
<div>
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th v-for="column in headers">{{column}}</th>
</tr>
</thead>
<tbody>
<tr  v-for="(row, index) in data">
<td>{{index + 1}}</td>
<td v-for="column in row">{{column}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "simple-table",
props: ['headers', 'data']
}
</script>

<style scoped>

</style>

Я хочу использовать его внутри моего файла шаблона лезвия Laravel. Для глобальной регистрации я попробовал:

import Vue from 'vue'


window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');

Vue.component('simple-table', require('./components/SimpleTable'));

В моем шаблоне клинка:

<div id="people">
<simple-table :data="tableData" :headers="columns">
</simple-table>
</div>
........

<script>

const url = "{{url(sprintf("/api/admin/employees/%s/salary-history", $employee->id))}}";


new Vue({
el: "#people",
data: {
columns: ['id', 'name', 'age'],
tableData: [
{ id: 1, name: "John", age: "20" },
{ id: 2, name: "Jane", age: "24" },
{ id: 3, name: "Susan", age: "16" },
]
}
});




</script>

Но это показывает ошибку:
[Vue warn]: неизвестный пользовательский элемент: — вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «имя».

Для локальной регистрации компонента я использовал следующий метод:

//app.js
import SimpleTable from './components/SimpleTable'
window.SimpleTable = SimpleTable

Затем в моем шаблоне лезвия, когда я пытаюсь использовать зарегистрировать его

....
components: {
'simple-table': window.SimpleTable
}

Но я все еще получаю ту же ошибку. Если я консоль журнала окна. SimpleTable он отображается как неопределенный

Я использую Laravel Mix с конфигурацией по умолчанию. Что я делаю неправильно?