How to validate field on blur using Vue.js and Vuelidate

I'm using Bootstrap-Vue form inputs, and using Vuelidate to validate. Currently on user input, I get the outline colour (red or green) and a tickbox or a cross depending if valid or invalid. I now want to change this behaviour so that it only shows this on blur. I added the following line of code to my input, however the same behaviour occurs:

@blur="$v.form.code_part1.$touch()"

Here is my full code for an input, please can you explain where I am going wrong, or how to approach this correctly?

<b-form-input
              :class="{ 'hasError': $v.form.code_part2.$error }"
              placeholder="Next Four"
              v-model="$v.form.code_part2.$model"
              @blur="$v.form.code_part1.$touch()"
              :state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
              class="form-control mb-3"
              name="Part 2"
              id="code_part2"
              type="text"
              maxlength="4"
              aria-label="Next Four"
></b-form-input>

Add the .native modifier

@blur.native="$v.form.code_part1.$touch()"

Binding Native Events to Components