title: How to properly add custom validation to array in vuelidate
body: <p>I have an array of objects with the following structure</p>
  
  <pre><code>varientSections: [
      {
        type: "",
        values: [
          {
            varientId: 0,
            individualValue: ""
          }
        ]
      }
    ]
  </code></pre>
  
  <p>I created a custom validation called isDuplicate, which checks for duplicate value for the property "type". For example</p>
  
  <pre><code>varientSections: [
      {
        type: "Basket",
        values: [
          {
            varientId: 0,
            individualValue: ""
          }
        ]
      },
      {
        type: "Basket", // ERROR: Duplicate with the "above" object
        values: [
          {
            varientId: 1,
            individualValue: ""
          }
        ]
      }
    ],
  </code></pre>
  
  <p>I was able to get my custom validation to work. However, the $invalid property will be false for all the objects present in the array. Hence, all the objects in the array will be highlighted in red</p>
  
  <p><a href="https://i.stack.imgur.com/OuxCd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OuxCd.png" alt="enter image description here"></a></p>
  
  <p>Below is my validation code:</p>
  
  <pre><code>validations: {
  varientSections: {
    $each: {
      type: {
        required,
        isDuplicate(type, varient) {
          console.log(varient);
          const varientIndex = this.varientSections.findIndex(
            v =&gt; v.type === type
          );
  
          var isWrong = true;
          this.varientSections.forEach((varObject, index) =&gt; {
            if (index !== varientIndex) {
              if (varObject.type === varient.type) {
                isWrong = false;
              }
            }
          });
  
          return isWrong;
        }
      },
      values: {
        $each: {
          individualValue: {
            required
          }
        }
      }
    }
  }
  },
  </code></pre>