Vueで宣言してるのにnot definedとなるのとlengthが使えない

Question

Vueの勉強－LaravelでVueコンポーネントの使い方を学んでおります。

フォームのバリデーションでエラーメッセージを出すサンプルを作っているのですが、エラーが出てしまい、解消できず困っております。。
アドバイスをいただけますと幸いです。

#####出ているエラー

[Vue warn]: Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 

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

####コード
index.blade.php

@extends('app')

@section('title', 'お問合せ')

@section('content')
  @include('nav')
  <div class="container">
    
      <hr>
        <contact-form title="お問い合わせフォームだよ"></contact-form>
      <hr>
    
  </div>
@endsection

問題のコンポーネントファイル　ContactForm.vue

<template>
<div>
  <p><b>{{title}}</b></p>
  <form>
    <span>名前 : </span>          
    <input
      type="text"
      placeholder="名前"
      v-model="ContactForm.Name"
    >
      <p>
        名前は {{ ContactForm.Name }} 
      </p>
      <span>電話番号 : </span>          
    <input
      type="text"
      placeholder="電話番号"
      v-model="ContactForm.Phone"
    >
      <p>
        電話番号 {{ ContactForm.Phone }} 
      </p>
     
      <button v-on:click="checkForm">
        送信する
      </button>
    </form>
    <p v-if="errors.length">
      <b>Please correct the following error(s):</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
    
</div>
</template>

<script>
  export default {
    props: {
      title : String,
    },
    data: function() {
      return {
        ContactForm:{
          Name:null,
          Phone:null,
        },
        erros: [],
      }
    },
    methods: {
      checkForm: function(event){
        var Phone = false
        this.errors = [];

        //入力フォームのバリデーション
        if (!this.ContactForm.Name) {
          this.errors.push("名前を入力してください");
        }
        if (!this.ContactForm.Phone) {
          this.errors.push("電話番号を入力してください");
        } 
        else if(!this.checkString(this.ContactForm.Phone)){
          this.errors.push("半角英数で入力してください");
        }else {
          Phone = true
        }

        if(Phone == true){
          this.Validation.RegistReult=""
          alert('お問い合わせありがとうございました、' + this.ContactForm.Name + '様');
        } 
        event.preventDefault() 
      },
      checkString: function(inputdata){
        var re = /^[A-Za-z0-9]*$/
        return re.test(inputdata);
      }
    }
  }
</script>

<style scoped>
</style>

……data: function() でerros: [], としているのですが、これだとだめなのでしょうか。。。

また、

<p v-if="errors.length">　のlengthがundefinedというのは…

行き詰ってしまいました…

Answer 1

タイポでは？
erros -> errors

data: function() {
      return {
        ContactForm:{
          Name:null,
          Phone:null,
        },
        erros: [],
      }
    },

Comments

[mikeko0901]

大変失礼しました！お恥ずかしいです…
スペルミスでした…