title: Validate fields Steps Buefy and block next button until completing required
body: <p>Hello I have a request in vue.js where b-input is required, if not it cannot continue, I've tried</p>
  <pre><code>required
  validation-message=&quot;name required&quot;
  </code></pre>
  <p>in b-step-item, also in the watch event.</p>
  <pre><code> watch: {
      activeStep(step) {
        this.ValidationSteps()
      },
    },
    methods: {
      ValidationSteps() {
        this.erros = []
        if (this.nameField === '') {
          this.erros.push({ description: 'Field is required' })
        }
      },
    },
  </code></pre>
  <p>but I still can't get the field to continue.</p>
  <p>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</p>
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;b-steps v-model=&quot;activeStep&quot; :has-navigation=&quot;false&quot;&gt;
        &lt;b-step-item step=&quot;1&quot; label=&quot;Account&quot; :clickable=&quot;isStepsClickable&quot;&gt;
          &lt;h1 class=&quot;title has-text-centered&quot;&gt;Account&lt;/h1&gt;
          &lt;b-input
            v-model=&quot;NombreCampo&quot;
            placeholder=&quot;Enter field name&quot;
            required
            validation-message=&quot;name required&quot;
          &gt;&lt;/b-input&gt;
          &lt;article v-if=&quot;erros.length &gt; 0&quot; class=&quot;message is-danger&quot;&gt;
            &lt;div class=&quot;message-header&quot;&gt;
              &lt;p&gt;Error ({{ erros.length }})&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;message-body&quot;&gt;
              &lt;div class=&quot;content&quot;&gt;
                &lt;ul&gt;
                  &lt;li v-for=&quot;(db, index) in erros&quot; :key=&quot;index&quot;&gt;
                    {{ db.description }}
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/b-step-item&gt;
  
        &lt;b-step-item
          step=&quot;2&quot;
          label=&quot;Profile&quot;
          :clickable=&quot;true&quot;
          :type=&quot;{ 'is-success': true }&quot;
        &gt;
          &lt;h1 class=&quot;title has-text-centered&quot;&gt;Profile&lt;/h1&gt;
        &lt;/b-step-item&gt;
  
        &lt;template #navigation=&quot;{ previous, next }&quot;&gt;
          &lt;b-button
            :disabled=&quot;previous.disabled&quot;
            @click.prevent=&quot;previous.action&quot;
          &gt;
            Previous
          &lt;/b-button&gt;
          &lt;b-button :disabled=&quot;next.disabled&quot; @click.prevent=&quot;next.action&quot;&gt;
            Next
          &lt;/b-button&gt;
        &lt;/template&gt;
      &lt;/b-steps&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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' })
        }
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>Any suggestion or solution would be appreciated.</p>