Why bootstrap table example not working for me? - vue.js

Question

I have a some project with table like this bootstrap table.
Codesandbox
template:
<b-table small :fields="fields" :items="items">
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
</template>
<!-- A custom formatted column -->
<template v-slot:cell(name)="data">
<b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
</template>
<!-- A virtual composite column -->
<template v-slot:cell(nameage)="data">
{{ data.item.name.first }} is {{ data.item.age }} years old
</template>
<!-- Optional default data cell scoped slot -->
<template v-slot:cell()="data">
<i>{{ data.value }}</i>
</template>
</b-table>
And script:
fields: [
// A virtual column that doesn't exist in items
'index',
// A column that needs custom formatting
{ key: 'name', label: 'Full Name' },
// A regular column
'age',
// A regular column
'sex',
// A virtual column made up from two fields
{ key: 'nameage', label: 'First name and age' }
],
items: [
{ name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
{ name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
{ name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
{ name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
]
Bootstrap table works. I am copy this code and example not work. And I do not understand why.
Question: So, Why bootstrap table example not working?

Answer 1

Helo, i have same problem.
I have some custom fields table, on vue devtools the data has been seen. in vuex bindings.
But on custom table no data can appear, just the amount of data available.
This is my template code
<template>
<div class="table-responsive">
<b-table striped hover :items="todos.data" :fields="fields" show-empty>
<template slot="jadwal" slot-scope="row">
<td class="parent-row">{{ row.item.name }}</td>
</template>
</b-table>
</div>
</template>
and this object vuex binding
{"current_page":1,"data":[{"id":1,"name":"Belajar Vue Laravel","note":"Apa aja boleh deh ini deskripsinnya","due_date":"2019-09-30","status":0,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"},{"id":2,"name":"Belajar mengerti kamu","note":"you are my everythings","due_date":"2019-10-01","status":1,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"}],"first_page_url":"http://localhost:8000/api/todo?page=1","from":1,"last_page":1,"last_page_url":"http://localhost:8000/api/todo?page=1","next_page_url":null,"path":"http://localhost:8000/api/todo","per_page":10,"prev_page_url":null,"to":2,"total":2}