Как я могу включить проверку на стороне сервера без обновления или перезагрузки страницы в Vuejs?

Question

Я использую v-if=category_toggle, чтобы скрыть таблицу на моей странице, и еще v-if="add_category_new", чтобы показать мою форму. Когда я нажимаю кнопку «Отправить», не вводя никаких данных в мое текстовое поле. Я хочу запретить обновление моей страницы и включить проверку на стороне сервера, если текстовое поле пустое, минимальная длина меньше 5 и максимальная длина больше 45. Возможно ли это? Я использую Vue JS с axios. Может ли кто-нибудь помочь мне с моей проблемой? Вот мой код

addCategory : function() {
 if(this.category_description.trim() == "" || 
  this.category_description.length < 5 || this.category_description.length 
  > 10) {
this.category_description = "";
this.category_toggle = false;
    this.add_category_new = true;
  }
  else {
axios({
   method : "POST",
   url : this.urlRoot + "admin/add_category.php",
   data : {
    description : this.category_description
   }
}).then(function (response){
       vm.retrieveCategory();
   swal("Congrats!", " New category added!", "success");    
   vm.clearData();          
});
   }
  },

  <?php
  if($_SERVER['REQUEST_METHOD'] == "POST") {
    $validation = new Validation();
    $data = [
        "category_description" => $_POST['category_description'] ?? ''
    ];
    $validation->validate($data, [
        "category_description" => "required|minlen:5|maxlen:45"
    ]);

    $errors = $validation->getErrors();
   } else {
    $data = [
       "category_description" => ""
    ];
    $errors = [
        "category_description" => ""
    ];
   }
  ?>

 <div v-if="add_category_new">
   <div class="profile-head">
      <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
        <li class="nav-item">
      <a class="nav-link active" id="home-tabs" data-toggle="tab" 
             href="#homes" role="tab" aria-controls="home" aria- 
             selected="true">Add New Category</a>
                </li>
            </ul>
        </div> 
        <div class="row">
          <div class="col-sm-4">   
            <form method="post" @submit="addCategory">
                <div class="form-group">
                  <label for="name"><h6>Category</h6></label>
                  <input type="text" v-model="category_description" name="category_description" value="<?php echo $data['category_description'] ?>" @keydown="isLetter($event)" placeholder="Enter Category" class="form-control <?php if(!empty($errors['category_description'])) { echo 'is-invalid';} ?>">
                  <div class="invalid-feedback"><?php echo $errors['category_description'] ?></div>
                </div>

                <div class="form-group float-left">
                  <div class="input-group">
                      <button type="submit" @click="addCategory" 
   class="btn btn-primary btn-sm"><i class="far fa-save">&nbsp;</i> 
   Save</button>
                  </div>
                </div>
            </form>
          </div>
        </div>
    </div>