makes watcher eager and aligns files vertically

public/js/components/Form/Upload/Dms.js

@@ -55,30 +55,34 @@ export default {
 		}
 	},
 	watch: {
-		modelValue(n) {
-			if (n instanceof FileList)
-				return this.$refs.upload.files = n;
-
-			const dt = new DataTransfer();
-			const dms = [];
-			for (var file of n) {
-				if (file instanceof File) {
-					dt.items.add(file);
-				} else {
-					const dmsFile = new File([JSON.stringify(file)], file.name, {
-						type: 'application/x.fhc-dms+json'
-					});
-					dt.items.add(dmsFile);
+		modelValue:{
+			handler(n) {
+				if (n instanceof FileList)
+					return this.$refs.upload.files = n;
+	
+				const dt = new DataTransfer();
+				const dms = [];
+				for (var file of n) {
+					if (file instanceof File) {
+						dt.items.add(file);
+					} else {
+						const dmsFile = new File([JSON.stringify(file)], file.name, {
+							type: 'application/x.fhc-dms+json'
+						});
+						dt.items.add(dmsFile);
+					}
 				}
-			}
-			this.$emit('update:modelValue', dt.files);
+				this.$emit('update:modelValue', dt.files);
+			},
+			immediate:true
 		}
 	},
 	template: `
 	<div class="form-upload-dms">
+	
 		<input ref="upload" class="form-control" :class="inputClass" :id="id" :name="name" :multiple="multiple" type="file" @change="addFiles">
 		<ul v-if="modelValue.length && multiple && !noList" class="list-unstyled m-0">
-			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1">
+			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1 align-items-center">
 				<span class="col-auto"><i class="fa fa-file me-1"></i></span>
 				<span class="col">{{ file.name }}</span>
 				<button class="col-auto btn btn-outline-secondary btn-p-0" @click="removeFile(index)">