title: How to map a nested Vuelidate validation object with computed properties in VueJS?
body: <p>I have a tabs container with multiple forms. Some of the fields in all forms have some complex logic that I didn't want to repeat on each form, so I created a custom component that is used in all forms. I'm trying to use Vuelidate to validate all of my forms but since those field names are the same, and of course have the same validation logic, the Vuelidate validation object is the same in all forms, meaning, if I fill in the <code>email</code> field in formA, then all forms with that same field will also validate correctly, even though the rest of the forms haven't been filled in at all.</p>
  
  <p>I tried to wrap my validations inside an object named as the forms, and this seems to separate all validation logic correctly, but, I have other setup there that prevents me from using <code>data</code> attributes and I use <code>computed</code> attributes instead. As far as I know, the validations object must match the way we access fields data, like, <code>data() { formA: { email } }</code> would match to validation object <code>validations: { formA: { email } }</code>, the problem is, since I'm not using <code>data</code> properties, I don't know how to map computed properties.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>  export default {
      components: { PhoneField, TopNote, SubmitButton, NameFieldsGroup, EmailField },
      validations: {
        formA: {
          firstName: { required },
          lastName: { required },
          email: {
            required,
            email
          },
          phone: {
            required,
            length: minLength(10)
          }
        }
      },
      created() {
        this.$store.commit('setFormValidation', this.$v);
      },
      data() {
        return {}
      },
      computed: {
        firstName: function() {
          return this.$store.getters.formState.firstName;
        },
        lastName: function() {
          return this.$store.getters.formState.lastName;
        },
        email: function() {
          return this.$store.getters.formState.email;
        },
        phone: function() {
          return this.$store.getters.formState.phone;
        }
      }
    };
  
  </code></pre>
  
  <p>I've been messing around with this for the past several days, but can't figure it out. Anyone can suggest a solution for this?</p>