vue.js shows no error but page show blank page - api

Question

im making a vue crud page, i already made the route, there is no error in the cmd but when i open the page i doesn't show anything.
here is the barang.vue file that i use for the home
<template>
<div>
<router-link to="/BarangForm/create">Tambah Barang</router-link>
<table>
<tr>
<th>no</th>
<th>Nama</th>
<th>jenis</th>
<th>Harga</th>
<th>Kuantitas</th>
</tr>
<tr v-for="(barang, i) in data_barang" :keys="i">
<td>{{ i + 1}}</td>
<td>{{ barang.nama_barang }}</td>
<td>{{ barang.harga_barang }}</td>
<td>{{ barang.jenis_barang }}</td>
<td>{{ barang.kuantitas }}</td>
<td>
<router-link :to="'/barang' + barang.id">Edit</router-link>
<button #click="deleteRow(barang.id)">Delete</button>
</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'barang',
data () {
return{
data_barang: []
}
},
mounted () {
this.get()
},
methods: {
get () {
axios.get('barang').then(res => {
if (res.data.status === 'success') {
this.data_barang = res.data.result
}
})
},
deleteRow (id) {
axios.delete('barang/' + id).then(res => {
if(res.data.status === 'success') {
this.get()
}
})
}
}
}
</script>
here is the form for the create and edit
<template>
<div>
<form #submit.prevents="submitForm">
<div>
<label>Nama Barang : </label>
<input type="text" v-model="barang.nama_barang">
</div>
<div>
<label>Harga Barang : </label>
<input type="text" v-model="barang.harga_barang">
</div>
<div>
<label>Jenis Barang : </label>
<input type="text" v-model="barang.jenis_barang">
</div>
<div>
<label>Kuantitas : </label>
<input type="text" v-model="barang.kuantitas">
</div>
<button type="submit">Masukan</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'BarangForm',
data () {
return {
barang: {
id: null,
nama_barang: null,
jenis_barang: '',
harga_barang: '',
kuantitas: ''
}
}
},
mounted () {
let id = this.$route.params.id
if (id) {
axios.get('/barang/' + id).then(res => {
this.barang = res.data.result
})
}
},
methods: {
submitForm () {
let data = this.barang
let url = 'barang'
if (this.barang.id){
url += '/' + this.barang.id
}
axios.post(url, data).then(res => {
if (res.data.status === 'success') {
this.$router.push('/barang')
}
})
}
}
}
</script>
this is the router for configuring the route
import Vue from 'vue'
import barang from '#/components/barang'
import BarangForm from '#/components/BarangForm'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/',
name: 'barang',
component : barang
},
{
path: '/barang/create',
name: 'BarangCreate',
component: BarangForm
},
{
path: '/barang/:id',
name: 'BarangEdit',
component: BarangForm
}
]
})
here is the file to render the page
import Vue from 'vue'
import App from './App.vue'
import Router from './router/index.js'
Vue.config.productionTip = false
new Vue({
Router,
render: h => h(App),
}).$mount('#app')
i plan to put every router-link in the home page.