Why can't vuelidate define form?

Question

Validation

I use Nuxt and vuelidate
There is a form.
Error showing when loading page

Cannot read property 'form' of undefined

How to fix it?

If you remove

:class="$v.form.username.$error ? 'is-invalid' : ''"

then the error disappears

<form class="form" @submit.prevent="login">
        <input
          type="text"
          placeholder="username"
          v-model.trim="form.username"
          :class="$v.form.username.$error ? 'is-invalid' : ''"
          class="input"
        />
        <span>Username is required</span>
        <input
          type="password"
          placeholder="password"
          v-model.trim="form.password"
          class="input"
        />
        <span>Password is required</span>
        <div class="button">
          <button class="btn-login">Login</button>
        </div>
      </form>

import { required} from 'vuelidate/lib/validators'

data: () => ({
    form: {
      username: '',
      password: '',
    }
methods: {
    login() {
      this.$v.form.$touch();
      if (this.$v.form.$error) {
        return;
      }
      console.log('validation is successfull');
    },
  },
validations: {
    form: {
      username: { required },
      password: { required}

    }
  }
  }),

Answer 1

It turned out that the validations block was in the wrong scope)
Full validation looks like this:

<template>
  <div class="login">
    <div class="container">
      <h1>Login</h1>
      <form class="form" @submit.prevent="login">
        <input
          type="text"
          placeholder="username"
          v-model.trim="form.username"
          :class="$v.form.username.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.username.$error ? 'showError' : 'hideError'"
          >Username is required</span
        >
        <input
          type="password"
          placeholder="password"
          v-model.trim="form.password"
          :class="$v.form.password.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.password.$error ? 'showError' : 'hideError'"
          >Password is required</span
        >
        <div class="button">
          <button class="btn-login">Login</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  name: 'login',
  head() {
    return {
      title: 'Login',
      meta: [
        {
          hid: 'login',
          name: 'login',
          content: 'login content',
        },
      ],
    }
  },
  data: () => ({
    form: {
      username: '',
      password: '',
    },
  }),
  methods: {
    login() {
      this.$v.form.$touch()
      if (this.$v.form.$error) {
        return
      }
      console.log('success')
    },
  },
  mounted() {},
  validations: {
    form: {
      username: { required },
      password: { required },
    },
  },
}
</script>