Creating a Buefy table from a VueJs table - vue.js

Question

I've been trying to create a table with Buefy from a VueJs table.
My VueJs table gets data from a JSON file.
Here is my JSON file :
{
"1":
{
"Date":"01/01/2016",
"New":0,
"In progress":0,
"Sent":0,
"Fail":0
},
"2":
{
"Date":"01/01/2015",
"New":0,
"In progress":0,
"Sent":0,
"Fail":3
}
}
My VueJs code :
<template>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>New</th>
<th>In prrogress</th>
<th>Sent</th>
<th>Dail</th>
</tr>
</thead>
<tr v-for="sms in sms">
<td v-for="sms in sms">{{sms}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
sms: ''
}
},
created () {
this.$http.post('api.php',{object : 'data', action : 'fetch'})
.then(
response => {
this.sms = response.body
})
.catch(function(error){
console.log(error)
})
}
}
</script>
The result is :
I want to get the same result using Buefy table so i did :
<template>
<b-table :data=data :columns="columns"></b-table>
</template>
<script>
export default {
data() {
return {
data: [
],
columns: [
{
field: "Date",
label: 'Date',
centered: true
centered: true
},
{
field: "New",
label: "New",
centered: true
centered: true
},
{
field: "In progress",
label: "In progress",
centered: true
centered: true
},
{
field: "Sent",
label: "Sent",
centered: true
},
{
field: "Fail",
label: "Fail",
centered: true
centered: true
}
]
}
},
methods: {
loadData(){
this.$http.post('api.php',{object : 'data', action : 'fetch'}).then(({ data }) => {
this.data = data.body
})
}
},
mounted() {
this.loadData()
}
}
</script>
but I'm getting this empty table :