Несколько форм Vue с VeeValidate не работают на одной странице

Я пытаюсь использовать несколько форм с проверкой VeeValidate для одного и того же компонента Vue, и мне не повезло. Я пробовал ограничить валидацию определенными областями, но, похоже, они не распознаются. Первый вид (регистр с 4 полями) работает нормально. Однако, если вы перейдете к представлению входа в систему, проверка не отобразится там, а перенесется в первые два поля представления регистра). Любая помощь будет принята с благодарностью.

https://codepen.io/admrbsn/pen/qGrEqz

HTML:

<div id="mainContainer">
   <!-- Join -->
   <div v-if="!showLogIn">
      <h5>Join</h5>
      <p>Already have an account? <span v-on:click="showLogIn = true">Log in here</span></p>
      <form @submit.prevent="validateAndJoin('join')" data-vv-scope="join">
         <label for="first_name">First Name</label>
         <input v-model="visitor.first_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.first_name') }" id="first_name" name="first_name" data-vv-as="first name" placeholder="Your first name"
            autocomplete="off" />
         <div v-show="errors.has('join.first_name')" class="invalid-feedback">{{ errors.first('join.first_name') }}</div>
         <label for="last_name">Last Name</label>
         <input v-model="visitor.last_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.last_name') }" id="last_name" name="last_name" data-vv-as="last name" placeholder="Your last name"
            autocomplete="off" />
         <div v-show="errors.has('join.last_name')" class="invalid-feedback">{{ errors.first('join.last_name') }}</div>
         <label for="emailAddress">Email Address</label>
         <input v-model="visitor.emailAddress" v-validate="'required|email'" type="email" :class="{'input': true, 'is-invalid': errors.has('join.emailAddress') }" id="emailAddress" name="emailAddress" data-vv-as="email address"
            placeholder="Your email address" autocomplete="off" />
         <div v-show="errors.has('join.emailAddress')" class="invalid-feedback">{{ errors.first('join.emailAddress') }}</div>
         <label for="password">Password</label>
         <input v-model="visitor.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('join.password') }" id="password" name="password" data-vv-as="password" autocomplete="off" />
         <div v-show="errors.has('join.password')" class="invalid-feedback">{{ errors.first('join.password') }}</div>
         <button type="submit">Join</button>
      </form>
   </div>
   <!-- Log in -->
   <div v-if="showLogIn">
      <h5>Log in to Peterson's</h5>
      <p>Need an account? <span v-on:click="showLogIn = false">Join</span></p>
      <form @submit.prevent="validateAndLogIn('login')" data-vv-scope="login">
         <label for="loginEmail">Email address</label>
         <input v-model="user.email" v-validate="'required'" type="email" :class="{'input': true, 'is-invalid': errors.has('login.loginEmail') }" id="loginEmail" name="loginEmail" data-vv-as="email address" placeholder="Your email address"
            autocomplete="off">
         <div v-show="errors.has('login.loginEmail')" class="invalid-feedback">{{ errors.first('login.loginEmail') }}</div>
         <label for="loginPassword">Password</label>
         <input v-model="user.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('login.loginPassword') }" id="loginPassword" name="loginPassword" data-vv-as="password" placeholder="Your password"
            autocomplete="off">
         <div v-show="errors.has('login.loginPassword')" class="invalid-feedback">{{ errors.first('login.loginPassword') }}</div>
         <button type="submit">Log in</button>
      </form>
   </div>
</div>

Vue:

Vue.use(VeeValidate);
var main = new Vue({
  el: "#mainContainer",
  props: {
    showLogIn: false
  },
  data() {
    return {
      user: {
        email: '',
        password: ''
      },
      visitor: {
        first_name: '',
        last_name: '',
        emailAddress: '',
        password: ''
      }
    }
  },
  methods: {
    validateAndJoin(scope) {
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          console.log('Submitted')
        }
      });
    },
    validateAndLogIn(scope) {
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          console.log('Submitted')
        }
      });
    },
  }
});