How to pass data from vue to laravel?

Question

Laravel

Hello. I want to make a spa application. And my main page has a form, registration and authorization, but not the essence.
Here is the form(registration) This is the FormAuthComponent.vue file

<div class="uk-card">
              <div class="auth-title">
                  <span class="uk-text-bold">Регистрация</span>
              </div>
              <div class="uk-card-body auth-body">
                  <form method="POST" action="{{ routeReg }}">
                        {{ csrf }}
                        <div class="auth-form">
                            <input id="name" type="text" class="uk-input" name="name" required autofocus placeholder="Логин">
                            {{ ifErrorHasName }}
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ errorFirstName }}</strong>
                                </span>
                            {{ endif }}
                        </div>
                        <div class="auth-form">
                            <input id="email" type="email" class="uk-input" name="email" required placeholder="Email">
                            {{ ifErrorHasEmail }}
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ errorFirstEmail }}</strong>
                                </span>
                            {{ endif }}

                        </div>
                        <div class="auth-form">
                            <input id="password" type="password" class="uk-input" name="password" required placeholder="Пароль">

                           	{{ ifErrorHasPass }}
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ errorFirstPass }}</strong>
                                </span>
                            {{ endif }}
                        </div>
                        <div class="auth-form">
                            <input id="password-confirm" type="password" class="uk-input" name="password_confirmation" required placeholder="Повторить пароль">
                        </div>
                        <div class="auth-form">
                            <button type="submit" class="uk-button auth-form-button-reg">
                                Зарегистироваться
                            </button>
                        </div>
                    </form>
              </div>
              <div class="auth-form auth-form-reg">
                  <span class="uk-text">Есть аккаунт?</span>
                  <br>
                  <a @click="onClick" href="#" class="uk-link auth-form-reg-link">Авторизоваться!</a>
              </div>
          </div>

Here is the script for this file:

<script type="text/javascript">
  export default {
    data: function(){
      return{
        showAuth: true,
        showReg:false
      }
    },
    props:[
      'csrf',
      'ifErrorHasName',
      'ifErrorHasPass',
      'ifErrorHasEmail',
      'endif',
      'routeLog',
      'routeReg',
      'errorFirstName',
      'errorFirstEmail',
      'errorFirstPass',
    ],
    methods:{
      onClick: function(){
        this.showAuth = !this.showAuth
        this.showReg = !this.showReg
      }
    }
  }
</script>

Next .. I display this component on the main page:

<div class="uk-width-1-4 uk-background-muted uk-box-shadow-medium">
                        <formauth-component 
                            csrf="@csrf"
                            if-error-has-name="@if ($errors->has('name'))" 
                            if-error-has-email="@if ($errors->has('email'))" 
                            if-error-has-pass="@if ($errors->has('password'))" 
                            endif="@endif" 
                            route-log="{{ route('login') }}" 
                            route-reg="{{ route('register') }}" 
                            error-first-name="{{ $errors->first('name') }}"  
                            error-first-email="{{ $errors->first('email') }}" 
                            error-first-pass="{{ $error->first('password') }}"
                        ></formauth-component>
                    </div>

Am I doing it right?
Is this notation correct?
But apparently not, because the error:

Answer 1

I observe 3 open if and only one closed. Is that how it should be? ;)