Bootstrap Table not working with vue and laravel - laravel

Question

trying to add BootstrapTable to some component but it give me
TypeError: Cannot call a class as a function
when calling the
<BootstrapTable ref="table"/>
i'm using laravel also my app.js
require('./bootstrap');
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import jQuery from 'jquery'
window.$ = jQuery
//import Vue from 'vue'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
window.Vue = require('vue');
import VueRouter from 'vue-router';
import { routes } from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('dashboard', require('./components/Dashboard').default);
Vue.component('BootstrapTable', BootstrapTable)
const app = new Vue({
router
}).$mount('#app');
and component vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Dashboard</div>
<div class="card-body">
<BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BootstrapTable from "bootstrap-table";
export default {
components: {
BootstrapTable: BootstrapTable
},
data() {
return {
columns: [
{
title: "Item ID",
field: "id"
},
{
field: "name",
title: "Item Name"
},
{
field: "price",
title: "Item Price"
}
],
data: [
{
id: 1,
name: "Item 1",
price: "$1"
},
{
id: 2,
name: "Item 2",
price: "$2"
},
{
id: 3,
name: "Item 3",
price: "$3"
},
{
id: 4,
name: "Item 4",
price: "$4"
},
{
id: 5,
name: "Item 5",
price: "$5"
}
],
options: {
search: true,
showColumns: true
}
};
},
mounted() {
console.log("Dashboard mounted.");
}
};
</script>
please any help ? many thanks on advance.