Form.vue

<script>
    import {Validator} from 'laravel-micro.js'
    export default {
        name: "Form",
        props:{
            route: {
                type: String,
                required: true,
            },
            method: {
                type: String,
                default: ()=> 'post'
            },
            data: {
                type: Object,
                default: ()=> ({})
            }
        },
        data(){
            return {
                form: this.data,
                isLoading: false,
                validator: new Validator,
            }
        },
        methods:{
            submit() {
                this.isLoading = true
                this.$options.$http
                    .request(this.route, {
                        data: this.form,
                        method: this.method
                    }).then(({data}) => {
                        this.form = Object.assign({}, this.form, data)
                        this.$emit('saved', this.form)
                    }).catch(({response}) => {
                        this.validator.sync(response.data)
                        this.$emit('error', this.validator)
                    }).finally(() => {
                        setTimeout(()=>{
                            this.isLoading = false
                        }, 1000)
                    })
            },
        },
        provide(){
            return {
                form: this.form,
                submit: this.submit,
                validator: this.validator,
                loading: ()=>this.isLoading,
            }
        },
        created() {
            this.$options.$http = this.$app.make('Http')
        }
    }
</script>
<template>
    <form ref="form" @submit.prevent>
        <slot></slot>
    </form>
</template>