Vue JS和Axios：渲染错误/无法读取属性

Question

App.js

require('./bootstrap');
var Vue = require('vue');
const axios = require('axios').default;

class Errors { //if there  is any error show it in vue
    constructor() {
        this.errors = {};
    }

    has(field) {
        return this.hasOwnProperty(field);
    }

    any() {
        return Object.keys(this.errors).length > 0;
    }

    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0];
        }

    }

    record(errors) {
        this.errors = errors;
    }

    clear(field) {

        delete this.errors[field];
    }
}

class Form{
    constructor(data){
        this.data = data;

        for (let field in data){
            this[field] = data[field]
        }

        this.erros = new Errors();
    }
    reset(){

    }
    submit(){

    }
}


new Vue({ //display projects in a list

    el: '#root',
    data: {
        projects: []
    },
    mounted() {
        axios.get('/projects').
            then(response =>
                this.projects = response.data
            )
    }
})

new Vue({
    el: '#app',

    data: {
        form: new Form({
            name:'',
            description:''
        })
    },

    methods: {


        onSubmit() {
            axios.post('/projects', this.$data)
                .then(this.onSuccess)
                .catch(error => this.form.errors.record(error.response.data));
        },
        onSuccess(response) {
            alert(response.data.message);

            Form.reset(this);
        },


    }

})

create.blade.php

@extends('welcome')
@section('content')

@include('list')

<p class="p"></p>

<div id="app">



<form method="Post" action="/projects" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
@csrf


    <div class="control">

        <label for="name" class="label">Project Name:</label>

        <input type="text" id="name" name="name" class="input" v-model="form.name" >
    </div>

    <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>

    <div class="control">

        <label for="description" class="label">Project Description:</label>

        <input type="text" id="description" name="description" class="input" v-model="form.description">
    </div>

    <span class="help is-danger"  v-if="form.errors.has('description')" v-text="form.errors.get('description')"></span>


    <div class="control">
        <button class="button is primary" :disabled="form.errors.any()">Create</button>
    </div>

    </div>
</form>

我想发布到我的/ projects / create路由中，如果有关于验证的任何错误，它将在跨度下显示在我的表单下方。现在它说它无法读取表单的“具有”属性...我该如何解决？

 [Vue warn]: Error in render: "TypeError: Cannot read property 'has' of undefined"

(found in <Root>) warn @ app.js:20075 logError @ app.js:21334 globalHandleError @ app.js:21329 handleError @ app.js:21289 Vue._render @ app.js:22988 updateComponent @ app.js:23502 get @ app.js:23913 Watcher @ app.js:23902 mountComponent @ app.js:23509 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28479 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31364 Vue._init @ app.js:24447 Vue @ app.js:24513 ./resources/js/app.js @ app.js:31568
__webpack_require__ @ app.js:20 0 @ app.js:31643
__webpack_require__ @ app.js:20 (anonymous) @ app.js:84 (anonymous) @ app.js:87 app.js:21338 TypeError: Cannot read property 'has' of undefined
    at Proxy.eval (eval at createFunction (app.js:31069), <anonymous>:3:821)
    at Vue._render (app.js:22986)
    at Vue.updateComponent (app.js:23502)
    at Watcher.get (app.js:23913)
    at new Watcher (app.js:23902)
    at mountComponent (app.js:23509)
    at Vue../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:28479)
    at Vue../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:31364)
    at Vue._init (app.js:24447)
    at new Vue (app.js:24513)

我试图将has（field）更改为返回“ this.form。（...）”，但这没什么区别。