Laravel + JS Vue - node.js

Question

Just start a tutorial about Laravel 5.8 (from 0) and trying to add some JS to the project. Installed NodeJS: npm -v: 6.10.1; node -v: 12.6.0; Then install npm in the project and use npm run watch. After all change ExampleComponent.vue to MyButton.vue:
<template>
<div>
<button type="submit" class="my-button" v-text="test.name">My Button</button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
axios.post('api/vue', {})
.then(response => {
this.test = response.data
});
},
data: function () {
return {
test: null,
}
},
props: [
'text'
]
}
</script>
<style>
.my-button{
background-color: #333333;
}
</style>
Register it in app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('my-button', require('./components/MyButton.vue').default);
let app;
app = new Vue({
el: '#app',
});
then in my view add:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
<div id="app">
<my-button text="My new test button"></my-button>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
app.js component error
After all, I got the report from Laravel mix that build success:
DONE Compiled successfully in 16733ms 4:51:01 PM
But in the browser, I didn't see my button. I've tried cleaning the cache. But it doesn't help. Someone any suggestions?