Validate fields Steps Buefy and block next button until completing required

Hello I have a request in vue.js where b-input is required, if not it cannot continue, I've tried

required
validation-message="name required"

in b-step-item, also in the watch event.

 watch: {
    activeStep(step) {
      this.ValidationSteps()
    },
  },
  methods: {
    ValidationSteps() {
      this.erros = []
      if (this.nameField === '') {
        this.erros.push({ description: 'Field is required' })
      }
    },
  },

but I still can't get the field to continue.

This is my code, then I'll fix how the error messages appear below the field. (if it is possible to give the solution). I've searched and I can't find the solution in the documentation

<template>
  <section>
    <b-steps v-model="activeStep" :has-navigation="false">
      <b-step-item step="1" label="Account" :clickable="isStepsClickable">
        <h1 class="title has-text-centered">Account</h1>
        <b-input
          v-model="NombreCampo"
          placeholder="Enter field name"
          required
          validation-message="name required"
        ></b-input>
        <article v-if="erros.length > 0" class="message is-danger">
          <div class="message-header">
            <p>Error ({{ erros.length }})</p>
          </div>
          <div class="message-body">
            <div class="content">
              <ul>
                <li v-for="(db, index) in erros" :key="index">
                  {{ db.description }}
                </li>
              </ul>
            </div>
          </div>
        </article>
      </b-step-item>

      <b-step-item
        step="2"
        label="Profile"
        :clickable="true"
        :type="{ 'is-success': true }"
      >
        <h1 class="title has-text-centered">Profile</h1>
      </b-step-item>

      <template #navigation="{ previous, next }">
        <b-button
          :disabled="previous.disabled"
          @click.prevent="previous.action"
        >
          Previous
        </b-button>
        <b-button :disabled="next.disabled" @click.prevent="next.action">
          Next
        </b-button>
      </template>
    </b-steps>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 0,
      erros: [],
      nameField: '',
    }
  },
  watch: {
    activeStep(step) {
      this.ValidationSteps()
    },
  },
  methods: {
    ValidationSteps() {
      this.erros = []
      if (this.nameField === '') {
        this.erros.push({ description: 'Field is required' })
      }
    },
  },
}
</script>

Any suggestion or solution would be appreciated.