[Vuejs]-Why still adding even with validation form?

The easiest way to stop this is adding data check. And condition check at top of your method.category_description !== undefined. Btw, move your e.preventDefault() to top too.

When you are clicking on Add Category button, it is triggering the addCategory along with your validation method.

The return value of validation method has no impact on triggering of addCategory.

This issue can be handled in following ways.

1. Call addCategory only when there is some valid data

<button type="submit" @click="category_description != undefined ? addCategory() : ''" class="btn btn-primary"> Add Category </button>

2. Call the validation method inside addCategory and then proceed.

First of all do this:

-  <button type="submit" @click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
+  <button type="submit" @click.prevent="addCategory" class="btn btn-primary"> Add Category </button>

and then in addCategory:

addCategory() {
  if (!this.category_description) {
    return;
  } else {
  //  do your stuff here
  }

}