refactor: use @vuelidate for vue 3 in MacroForm, MacroNode and MacroProperties

app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue

@@ -27,6 +27,7 @@
 import MacroNodes from './MacroNodes.vue';
 import MacroProperties from './MacroProperties.vue';
 import { required, requiredIf } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -35,7 +36,7 @@ export default {
   },
   provide() {
     return {
-      $v: this.$v,
+      v$: this.v$,
     };
   },
   props: {
@@ -44,6 +45,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       macro: this.macroData,
@@ -112,16 +116,16 @@ export default {
       this.macro.actions.splice(index, 1);
     },
     submit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
-      this.$v.macro.actions.$each[index].$reset();
+      this.v$.macro.actions.$each[index].$reset();
       this.macro.actions[index].action_params = [];
     },
     resetValidation() {
-      this.$v.$reset();
+      this.v$.$reset();
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -11,7 +11,7 @@
     <div
       class="macro__node-action-item"
       :class="{
-        'has-error': hasError($v.macro.actions.$each[index]),
+        'has-error': hasError(v$.macro.actions.$each[index]),
       }"
     >
       <action-input
@@ -21,7 +21,7 @@
         :show-action-input="showActionInput"
         :show-remove-button="false"
         :is-macro="true"
-        :v="$v.macro.actions.$each[index]"
+        :v="v$.macro.actions.$each[index]"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
@@ -48,7 +48,7 @@ export default {
     ActionInput,
   },
   mixins: [macrosMixin],
-  inject: ['macroActionTypes', '$v'],
+  inject: ['macroActionTypes', 'v$'],
   props: {
     singleNode: {
       type: Boolean,

app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue

@@ -7,8 +7,8 @@
         :value="macroName"
         :label="$t('MACROS.ADD.FORM.NAME.LABEL')"
         :placeholder="$t('MACROS.ADD.FORM.NAME.PLACEHOLDER')"
-        :error="$v.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
-        :class="{ error: $v.macro.name.$error }"
+        :error="v$.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
+        :class="{ error: v$.macro.name.$error }"
         @input="onUpdateName($event)"
       />
     </div>
@@ -86,7 +86,7 @@
 
 <script>
 export default {
-  inject: ['$v'],
+  inject: ['v$'],
   props: {
     macroName: {
       type: String,