Fix reactivity of the medias data

Every so often, selected files would fail to be sent to the server along with the form.

Modules/Media/Assets/js/mixins/MultipleFileSelector.js

 export default {
     methods: {
         selectMultipleFile(event, model) {
-            if (!this[model].medias_multi) {
-                this[model].medias_multi = {};
+            if (typeof this[model].medias_multi === 'undefined') {
+                this.$set(model, 'medias_multi', {});
             }
-            if (!this[model].medias_multi[event.zone]) {
-                this[model].medias_multi[event.zone] = { files: [] };
+
+            if (typeof this[model].medias_multi[event.zone] === 'undefined') {
+                this.$set(this[model].medias_multi, event.zone, { files: [], orders: '' });
+            }
+
+            if (event.id !== null && event.id !== undefined) {
+                const medias = new Set(this[model].medias_multi[event.zone].files);
+                medias.add(event.id);
+                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
             }
-            this[model].medias_multi[event.zone].files.push(event.id);
         },
         unselectFile(event, model) {
-            if (!this[model].medias_multi) {
-                this[model].medias_multi = {};
+            if (event.id !== null && event.id !== undefined) {
+                const medias = new Set(this[model].medias_multi[event.zone].files);
+                medias.delete(event.id);
+                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
             }
-            if (!this[model].medias_multi[event.zone]) {
-                this[model].medias_multi[event.zone] = { files: [] };
-                if (this.$refs['multiple-media'] !== undefined && this.$refs['multiple-media'].selectedMedia !== undefined && !_.isEmpty(this.$refs['multiple-media'].selectedMedia)) {
-                    _.forEach(this.$refs['multiple-media'].selectedMedia, (file, key) => {
-                        this[model].medias_multi[event.zone].files.push(file.id);
-                    });
-                }
+
+            if (this[model].medias_multi[event.zone].files.length === 0) {
+                this.$delete(this[model].medias_multi, event.zone);
             }
-            this[model].medias_multi[event.zone].files = _.reject(this[model].medias_multi[event.zone].files, media => media === event.id);
         },
     },
 };

Modules/Media/Assets/js/mixins/SingleFileSelector.js

 export default {
     methods: {
         selectSingleFile(event, model) {
-            this[model].medias_single = _.merge(this[model].medias_single, {
-                [event.zone]: event.id,
-            });
+            if (typeof this[model].medias_single === 'undefined') {
+                this.$set(this[model], 'medias_single', {});
+            }
+
+            if (typeof this[model].medias_single[event.zone] === 'undefined') {
+                this.$set(this[model].medias_single, event.zone, null);
+            }
+
+            if (event.id !== null && event.id !== undefined) {
+                this.$set(this[model].medias_single, event.zone, event.id);
+            } else {
+                this.$delete(this[model].medias_single, event.zone);
+            }
         },
     },
 };