How to Handle Laravel error messages in vue? - laravel

Question

I know I did something wrong here, but how do you handle error messages of Laravel in vue template?... is there a way of bypassing the #error of the laravel Blade templating
this is the vue component file (fileComponent.vue)
<template>
<div class="row my-2">
<div class="col-md-2 font-weight-bold pt-2">Grade:</div>
<div class="col-md-10">
<select name="grade" class="form-control #error('grade') is-invalid #enderror" v-model="selected_grade" #change="onChange($event)">
<option v-for="grade in grading" :key="grade.id" :value="grade.name">{{grade.name}}</option>
</select>
#error('grade')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<div class="row my-3" v-if="subjects !== null">
<div class="col-md-3">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold">Subjects:</h6>
</div>
<div class="card-body">
<div class="custom-control custom-checkbox" v-for="subject in subjects" :key="subject.id">
<input type="checkbox" class="custom-control-input #error('subjects') is-invalid #enderror" name="subjects[]" :id="subject.name" :value="subject.name"/>
<label class="custom-control-label" :for="subject.name">{{subject.name}}</label>
</div>
#error('subjects')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
</div>
</div>
</div>
</template>
This is Shown on the page instead of error message