draft somewhat working validation $each

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -115,8 +115,9 @@
           @click="removeFilter"
         />
       </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      <pre>{{ JSON.stringify(v, null, 2) }}</pre>
+      <p v-if="v.values.length > 0" class="filter-error">
+        {{ v.values[0].$message || $t('FILTER.EMPTY_VALUE_ERROR') }}
       </p>
     </div>
 
@@ -223,6 +224,7 @@ export default {
       set(value) {
         const payload = this.value || {};
         this.$emit('input', { ...payload, values: value });
+        this.$emit('validate');
       },
     },
     query_operator: {

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -41,7 +41,7 @@
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           :grouped-filters="true"
-          :v="$v.appliedFilters.$each[i]"
+          :v="v$.appliedFilters.$each.$response.$errors[i]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -80,7 +80,8 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf, helpers } from '@vuelidate/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -117,26 +118,34 @@ export default {
       default: false,
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations() {
+    return {
+      appliedFilters: {
+        required,
+        $each: helpers.forEach({
+          values: {
+            ensureBetween0to999: helpers.withMessage(
+              'Value must be between 0 and 999',
+              (value, prop) => {
+                if (prop.filter_operator === 'days_before') {
+                  return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
+                }
+                return true;
+              }
+            ),
+            required: requiredIf(prop => {
+              return !(
+                prop.filter_operator === 'is_present' ||
+                prop.filter_operator === 'is_not_present'
+              );
+            }),
           },
-          required: requiredIf(prop => {
-            return !(
-              prop.filter_operator === 'is_present' ||
-              prop.filter_operator === 'is_not_present'
-            );
-          }),
-        },
+        }),
       },
-    },
+    };
   },
   data() {
     return {
@@ -347,8 +356,8 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$store.dispatch(
         'setConversationFilters',
         JSON.parse(JSON.stringify(this.appliedFilters))