Help needed in make custom module in kiosk

[vivekpandya12]

We are new to Laravel Spark, we are trying to add custom module in kiosk
so we want one form in that module,we are following steps of below link
https://spark.laravel.com/docs/2.0/forms

We are define our vue component for form in our ROOT_DIR/resources/assets/js/app.js
by adding below code:

Vue.component('formexample', {
data() {
return {
form: new SparkForm({
level_name: '',
level_status: ''
})
};
}
});

view file is : ROOT_DIR/resources/views/vendor/spark/kiosk/adm-levels.blade.php

Level Name

    <div class="col-md-6">
        <input type="level_name" class="form-control" name="level_name" v-model="formexample.level_name" autofocus>

        <span class="help-block" v-show="formexample.errors.has('level_name')">
            @{{ formexample.errors.get('level_name') }}
        </span>
    </div>
</div>
<div class="form-group" :class="{'has-error': formexample.errors.has('level_status')}">
    <label class="col-md-4 control-label">Status</label>

    <div class="col-md-6">
        <div class="radio">
            <label>
               <input type="radio" value="active" v-model="formexample.level_status">&nbsp;&nbsp;Active
            </label>
        </div>
        <div class="radio">
           <label>
                <input type="radio" value="inactive" v-model="formexample.level_status">&nbsp;&nbsp;Inactive
          </label>
        </div>
        <span class="help-block" v-show="formexample.errors.has('level_status')">
            @{{ formexample.errors.get('level_status') }}
        </span>
    </div>
</div>
<div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <button class="btn btn-primary" @click.prevent="level_add" :disabled="formexample.busy">
                <span v-if="formexample.busy">
                    <i class="fa fa-btn fa-spinner fa-spin"></i>Adding
                </span>

                <span v-else>
                    <i class="fa fa-btn fa-check-circle"></i>Add
                </span>
            </button>
        </div>
    </div>

After set the view file we add method to our vue component in app.js(ROOT_DIR/resources/assets/js/app.js) file:
new Vue(require('laravel-spark'));
Vue.component('formexample', {
data() {
return {
form: new SparkForm({
level_name: '',
level_status: ''
})
};
},
methods: {
register() {
Spark.post('/formexample', this.form)
.then(response => {
console.log(response);
});
}
}
});

After Doing above steps we run gulp command and complie our js successfully.
Here is gulp command snnipet for your reference:
root@vivek-pc:/opt/lampp/htdocs/onlinetutorial# gulp
[18:48:21] Using gulpfile /opt/lampp/htdocs/onlinetutorial/gulpfile.js
[18:48:21] Starting 'default'...
[18:48:21] Starting 'less'...

Fetching Less Source Files...

• resources/assets/less/app.less

Saving To...

• public/css/app.css

[18:48:22] Finished 'default' after 981 ms
[18:48:23] gulp-notify: [Laravel Elixir] Less Compiled!
[18:48:23] Finished 'less' after 2.7 s
[18:48:23] Starting 'browserify'...

Fetching Browserify Source Files...

• resources/assets/js/app.js

Saving To...

• public/js/app.js

[18:48:34] gulp-notify: [Laravel Elixir] Browserify Compiled!
[18:48:34] Finished 'browserify' after 11 s
[18:48:34] Starting 'copy'...

Fetching Copy Source Files...

• node_modules/sweetalert/dist/sweetalert.min.js

Saving To...

• public/js/sweetalert.min.js

[18:48:34] Finished 'copy' after 9.96 ms
[18:48:34] Starting 'copy'...

Fetching Copy Source Files...

• node_modules/sweetalert/dist/sweetalert.css

Saving To...

• public/css/sweetalert.css

[18:48:34] Finished 'copy' after 8.58 ms

Errors we are getting after following above steps:
1)[Vue warn]: Error when evaluating expression "formexample.busy": TypeError: scope.formexample is undefined (found in component: )
2)[Vue warn]: Error when evaluating expression "{'has-error': formexample.errors.has('level_name')}": TypeError: scope.formexample is undefined (found in component: )
3)[Vue warn]: Error when evaluating expression "formexample.errors.has('level_name')": TypeError: scope.formexample is undefined (found in component: )
4)[Vue warn]: Error when evaluating expression "formexample.errors.get('level_name')": TypeError: scope.formexample is undefined (found in component: )
5)[Vue warn]: Error when evaluating expression "{'has-error': formexample.errors.has('level_status')}": TypeError: scope.formexample is undefined (found in component: )
6)[Vue warn]: Error when evaluating expression "formexample.errors.has('level_status')": TypeError: scope.formexample is undefined (found in component: )

So our question is .we are follow the steps in wrong way ?? please suggest right way.

Also guide us for validation of forms and insert stuff into the database
Thankx in advance
Here is our files for your reference.
Reference files : files.zip