refactor(date-converter): improved ux and layout

src/composable/validation.ts

@@ -25,7 +25,15 @@ export type ValidationAttrs = {
   validationStatus: string | undefined;
 };
 
-export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
+export function useValidation<T>({
+  source,
+  rules,
+  watch: watchRefs = [],
+}: {
+  source: Ref<T>;
+  rules: UseValidationRule<T>[];
+  watch?: Ref<unknown>[];
+}) {
   const state = reactive<{
     message: string;
     status: undefined | 'error';
@@ -42,7 +50,7 @@ export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: Use
   });
 
   watch(
-    [source],
+    [source, ...watchRefs],
     () => {
       state.message = '';
       state.status = undefined;