From 6c3869cb0f8a5f36f9dfd7e6d3ca1e939f264888 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 14 Aug 2023 17:58:59 -0300
Subject: [PATCH] Uses modelValue on Buefy components. Begins refactor from
 VueDraggable to Sortable. #794.

---
 package-lock.json                             |  35 +-
 package.json                                  |   7 +-
 .../edition/collection-edition-form.vue       |  63 +-
 .../edition/exporter-edition-form.vue         |  14 +-
 .../edition/filter-edition-form.vue           |  21 +-
 .../edition/importer-edition-form.vue         |  10 +-
 .../edition/importer-mapping-form.vue         |  24 +-
 .../edition/item-bulk-edition-form.vue        |  15 +-
 .../components/edition/item-edition-form.vue  |  11 +-
 .../edition/metadata-section-edition-form.vue |  24 +-
 .../edition/metadatum-edition-form.vue        |  44 +-
 .../edition/taxonomy-edition-form.vue         |  18 +-
 .../components/edition/term-edition-form.vue  |  17 +-
 .../autocomplete/Autocomplete.vue             |   4 +-
 .../filter-types/checkbox/Checkbox.vue        |   4 +-
 .../date-interval/DateInterval.vue            |   8 +-
 .../components/filter-types/date/Date.vue     |  33 +-
 .../components/filter-types/date/FormDate.vue |   4 +-
 .../numeric-interval/FormNumericInterval.vue  |   8 +-
 .../numeric-interval/NumericInterval.vue      |   8 +-
 .../FormNumericListInterval.vue               |  16 +-
 .../NumericListInterval.vue                   |   4 +-
 .../filter-types/numeric/FormNumeric.vue      |   8 +-
 .../filter-types/numeric/Numeric.vue          |  29 +-
 .../filter-types/selectbox/Selectbox.vue      |   8 +-
 .../filter-types/taginput/Taginput.vue        |   2 +-
 .../filter-types/tainacan-filter-item.vue     |  64 +-
 .../filter-types/taxonomy/Checkbox.vue        |   4 +-
 .../filter-types/taxonomy/Taginput.vue        |   2 +-
 .../components/lists/attachments-list.vue     |   4 +-
 .../lists/collection-metadata-list.vue        | 880 +++++++++---------
 .../components/lists/collections-list.vue     |  21 +-
 .../admin/components/lists/items-list.vue     |  41 +-
 .../lists/metadata-mapping-list.vue           |  18 +-
 .../components/lists/metadata-types-list.vue  | 231 ++---
 .../admin/components/lists/processes-list.vue |  21 +-
 .../components/lists/related-items-list.vue   |   4 +-
 .../lists/repository-metadata-list.vue        | 395 ++++----
 .../components/lists/taxonomies-list.vue      |  21 +-
 .../lists/terms-list-hierarchical.vue         |   4 +-
 .../admin/components/lists/terms-list.vue     |  40 +-
 .../compound/child-metadata-list.vue          | 416 +++++----
 .../components/metadata-types/date/Date.vue   |  20 +-
 .../geocoordinate/FormGeoCoordinate.vue       |  16 +-
 .../geocoordinate/GeoCoordinate.vue           |   8 +-
 .../metadata-types/numeric/FormNumeric.vue    |   8 +-
 .../metadata-types/numeric/Numeric.vue        |   4 +-
 .../relationship/FormRelationship.vue         |  20 +-
 .../relationship/Relationship.vue             |   8 +-
 .../selectbox/FormSelectbox.vue               |   8 +-
 .../metadata-types/selectbox/Selectbox.vue    |   4 +-
 .../metadata-types/taxonomy/FormTaxonomy.vue  |  32 +-
 .../metadata-types/taxonomy/Taxonomy.vue      |   2 +-
 .../taxonomy/TaxonomyTaginput.vue             |   2 +-
 .../metadata-types/text/FormText.vue          |   4 +-
 .../components/metadata-types/text/Text.vue   |   8 +-
 .../metadata-types/textarea/Textarea.vue      |   4 +-
 .../metadata-types/user/FormUser.vue          |   4 +-
 .../components/metadata-types/user/User.vue   |   4 +-
 .../modals/activity-details-modal.vue         |   2 +-
 .../modals/available-exporters-modal.vue      |   2 +-
 .../modals/available-importers-modal.vue      |   2 +-
 .../components/modals/bulk-edition-modal.vue  |  12 +-
 .../modals/capability-edition-modal.vue       |   8 +-
 .../modals/collection-creation-modal.vue      |   4 +-
 .../components/modals/collections-modal.vue   |   2 +-
 .../components/modals/exposers-modal.vue      |   4 +-
 .../modals/item-document-text-modal.vue       |   2 +-
 .../modals/item-document-url-modal.vue        |  10 +-
 .../components/navigation/tainacan-header.vue |   4 +-
 .../other/checkbox-radio-filter-input.vue     |  20 +-
 .../other/checkbox-radio-metadata-input.vue   |  16 +-
 .../admin/components/other/custom-dialog.vue  |   2 +-
 .../components/other/item-copy-dialog.vue     |   4 +-
 .../other/item-creation-status-dialog.vue     |   2 +-
 .../components/other/processes-popup.vue      |   7 +-
 .../components/other/term-deletion-dialog.vue |   4 +-
 .../other/term-multiple-insertion-dialog.vue  |  12 +-
 .../other/term-parent-selection-dialog.vue    |   8 +-
 .../components/search/advanced-search.vue     |  28 +-
 .../components/search/filters-items-list.vue  |   6 +-
 .../components/search/filters-tags-list.vue   |   6 +-
 .../admin/components/search/pagination.vue    |  25 +-
 src/views/admin/js/admin-main.js              |  16 +-
 src/views/admin/js/event-bus-item-metadata.js |   4 +-
 src/views/admin/js/event-bus-metadata-list.js |  25 -
 src/views/admin/js/event-bus-search.js        | 671 +++++--------
 src/views/admin/pages/home-page.vue           |   2 +-
 .../admin/pages/lists/activities-page.vue     |  28 +-
 .../pages/lists/available-exporters-page.vue  |   2 +-
 .../pages/lists/available-importers-page.vue  |   2 +-
 .../admin/pages/lists/capabilities-page.vue   |   4 +-
 .../admin/pages/lists/collections-page.vue    | 107 ++-
 src/views/admin/pages/lists/filters-page.vue  | 404 ++++----
 src/views/admin/pages/lists/items-page.vue    | 350 +++++--
 src/views/admin/pages/lists/metadata-page.vue |   3 +-
 .../admin/pages/lists/taxonomies-page.vue     |  47 +-
 .../admin/pages/singles/collection-page.vue   |   1 -
 src/views/admin/pages/singles/item-page.vue   |   6 +-
 .../carousel-collections-list/theme.vue       |   2 -
 .../blocks/carousel-items-list/theme.vue      |   4 +-
 .../blocks/carousel-terms-list/theme.vue      |   4 +-
 .../theme-search/components/view-mode-map.vue |   2 +-
 .../components/view-mode-slideshow.vue        |   2 +-
 .../theme-search/theme-items-page.vue         | 151 +--
 .../components/term-creation-panel.vue        |  15 +-
 .../item-submission/item-submission-form.vue  |  28 +-
 107 files changed, 2458 insertions(+), 2375 deletions(-)
 delete mode 100644 src/views/admin/js/event-bus-metadata-list.js

diff --git a/package-lock.json b/package-lock.json
index 4efa7fafb..dd74cf9ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1610,9 +1610,9 @@
       }
     },
     "@ntohq/buefy-next": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.0.tgz",
-      "integrity": "sha512-47kqY9zl/kqw72AwHA2lLk44BFgQDvGnGyWrLmxsS88RpH8Dhw3ECH4+fPK+CYSIsL6V6og13BtxWG//nlpKzA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@ntohq/buefy-next/-/buefy-next-0.1.1.tgz",
+      "integrity": "sha512-5ZX1S9bhLqPFEmkmZeaUCRg289Ui/k3mT2qKQQ2p8ihTTCsW2ozXTcpcV3wmwsf81kPjT90ykU18u2ve92M2fA==",
       "requires": {
         "@babel/runtime": "7.18.9",
         "bulma": "0.9.4"
@@ -5846,9 +5846,9 @@
           }
         },
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
         },
         "type-fest": {
           "version": "0.6.0",
@@ -6433,9 +6433,18 @@
       }
     },
     "sortablejs": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
-      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
+    "sortablejs-vue3": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/sortablejs-vue3/-/sortablejs-vue3-1.2.9.tgz",
+      "integrity": "sha512-l0IIBdu+nRIwC2+KOkiavXw5vRfsn6MIPVSVSf7ItBevcuRZ4mVzC7dgnr/Hs/VPH2Q+nF2PYP3FsrnrG+7qCw==",
+      "requires": {
+        "sortablejs": "^1.15.0",
+        "vue": "^3.2.37"
+      }
     },
     "source-map": {
       "version": "0.7.4",
@@ -7127,14 +7136,6 @@
       "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.4.4.tgz",
       "integrity": "sha512-TH89uZrxGjaDvkaYAISvj8+k6Bf1rUKFillc8oJirs5XZEPiwM1ELKZQ786wz0rfPqkSHHny2lqqUCK7Rw+LcQ=="
     },
-    "vuedraggable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
-      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
-      "requires": {
-        "sortablejs": "1.14.0"
-      }
-    },
     "vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
diff --git a/package.json b/package.json
index 395683276..d4ed608a9 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,13 @@
     "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
   },
   "dependencies": {
+    "@ntohq/buefy-next": "^0.1.1",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/compat": "^3.3.4",
     "another-vue3-blurhash": "^0.0.1",
     "apexcharts": "^3.41.0",
     "axios": "^1.4.0",
     "blurhash": "^2.0.5",
-    "@ntohq/buefy-next": "^0.1.0",
     "bulma": "^0.9.4",
     "conditioner-core": "^2.3.3",
     "countup.js": "^2.7.0",
@@ -30,13 +30,14 @@
     "qs": "^6.11.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.9",
     "swiper": "^8.4.5",
     "vue": "^3.3.4",
-    "vue3-apexcharts": "^1.4.4",
     "vue-countup-v3": "^1.3.0",
     "vue-router": "^4.2.4",
     "vue-the-mask": "^0.11.1",
-    "vuedraggable": "^4.1.0",
+    "vue3-apexcharts": "^1.4.4",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
diff --git a/src/views/admin/components/edition/collection-edition-form.vue b/src/views/admin/components/edition/collection-edition-form.vue
index b19198a44..e9ffc6054 100644
--- a/src/views/admin/components/edition/collection-edition-form.vue
+++ b/src/views/admin/components/edition/collection-edition-form.vue
@@ -26,7 +26,7 @@
                         <b-input
                                 id="tainacan-text-name"
                                 :placeholder="$i18n.get('instruction_collection_name')"
-                                v-model:value="form.name"
+                                v-model="form.name"
                                 @blur="updateSlug"
                                 @focus="clearErrors('name')"/>
                     </b-field>
@@ -53,7 +53,7 @@
                                 type="textarea"
                                 rows="3"
                                 :placeholder="$i18n.get('instruction_collection_description')"
-                                v-model:value="form.description"
+                                v-model="form.description"
                                 @focus="clearErrors('description')"/>
                     </b-field>
 
@@ -68,8 +68,8 @@
                                 :message="$i18n.getHelperMessage('collections', 'slug')"/>
                         <b-input
                                 id="tainacan-text-slug"
-                                @input="updateSlug"
-                                v-model:value="form.slug"
+                                @update:model-value="updateSlug"
+                                v-model="form.slug"
                                 @focus="clearErrors('slug')"
                                 :disabled="isUpdatingSlug"
                                 :loading="isUpdatingSlug"/>
@@ -88,7 +88,7 @@
                             <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
                             <b-select
                                     id="tainacan-select-default_order"
-                                    v-model:value="form.default_order">
+                                    v-model="form.default_order">
                                 <option
                                         role="button"
                                         :class="{ 'is-active': form.default_order == 'DESC' }"
@@ -110,7 +110,7 @@
                             <b-select
                                     expanded
                                     :loading="isLoadingMetadata"
-                                    v-model:value="localDefaultOrderBy"
+                                    v-model="localDefaultOrderBy"
                                     id="tainacan-select-default_orderby">
                                 <option
                                         v-for="metadatum of sortingMetadata"
@@ -141,16 +141,17 @@
                                         aria-role="list"
                                         trap-focus
                                         position="is-top-right">
-                                    <button
-                                            class="button is-white"
-                                            slot="trigger"
-                                            position="is-top-right"
-                                            type="button">
-                                        <span>{{ $i18n.get('label_enabled_view_modes') }}</span>
-                                        <span class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                                        </span>
-                                    </button>
+                                    <template #trigger>
+                                        <button
+                                                class="button is-white"
+                                                position="is-top-right"
+                                                type="button">
+                                            <span>{{ $i18n.get('label_enabled_view_modes') }}</span>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                                            </span>
+                                        </button>
+                                    </template>
                                     <b-dropdown-item
                                             v-for="(viewMode, index) in Object.keys(registeredViewModes)"
                                             :key="index"
@@ -158,8 +159,8 @@
                                             aria-role="listitem">
                                         <b-checkbox
                                                 v-if="registeredViewModes[viewMode] != undefined"
-                                                @input="updateViewModeslist(viewMode)"
-                                                :value="checkIfViewModeEnabled(viewMode)"
+                                                @update:model-value="updateViewModeslist(viewMode)"
+                                                :model-value="checkIfViewModeEnabled(viewMode)"
                                                 :disabled="checkIfViewModeEnabled(viewMode) && form.enabled_view_modes.filter((aViewMode) => (registeredViewModes[aViewMode] && registeredViewModes[aViewMode].full_screen != true)).length <= 1">
                                             <p>
                                                 <strong>
@@ -193,7 +194,7 @@
                             <b-select
                                     expanded
                                     id="tainacan-select-default_view_mode"
-                                    v-model:value="form.default_view_mode"
+                                    v-model="form.default_view_mode"
                                     @focus="clearErrors('default_view_mode')">
                                 <option
                                         v-for="(viewMode, index) of validDefaultViewModes"
@@ -215,7 +216,7 @@
                                 size="is-small"
                                 true-value="yes" 
                                 false-value="no"
-                                v-model:value="form.hide_items_thumbnail_on_lists" />
+                                v-model="form.hide_items_thumbnail_on_lists" />
                         <help-button 
                                 :title="$i18n.getHelperTitle('collections', 'hide_items_thumbnail_on_lists')" 
                                 :message="$i18n.getHelperMessage('collections', 'hide_items_thumbnail_on_lists')"/>
@@ -231,7 +232,7 @@
                                 size="is-small"
                                 true-value="open" 
                                 false-value="closed"
-                                v-model:value="form.allow_comments" />
+                                v-model="form.allow_comments" />
                         <help-button 
                                 :title="$i18n.getHelperTitle('collections', 'allow_comments')" 
                                 :message="$i18n.getHelperMessage('collections', 'allow_comments')"/>
@@ -249,7 +250,7 @@
                                 size="is-small"
                                 true-value="yes" 
                                 false-value="no"
-                                v-model:value="form.allows_submission" />
+                                v-model="form.allows_submission" />
                         <help-button 
                                 :title="$i18n.getHelperTitle('collections', 'allows_submission')" 
                                 :message="$i18n.getHelperMessage('collections', 'allows_submission')"/>
@@ -272,7 +273,7 @@
                                         size="is-small"
                                         true-value="yes" 
                                         false-value="no"
-                                        v-model:value="form.submission_anonymous_user" />
+                                        v-model="form.submission_anonymous_user" />
                                 <help-button 
                                         :title="$i18n.getHelperTitle('collections', 'submission_anonymous_user')" 
                                         :message="$i18n.getHelperMessage('collections', 'submission_anonymous_user')"/>
@@ -289,7 +290,7 @@
                                         :message="$i18n.getHelperMessage('collections', 'submission_default_status')"/>
                                 <div class="status-radios">
                                     <b-radio
-                                            v-model:value="form.submission_default_status"
+                                            v-model="form.submission_default_status"
                                             v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'trash')"
                                             :key="index"
                                             :native-value="statusOption.slug">
@@ -322,7 +323,7 @@
                                         size="is-small"
                                         true-value="yes" 
                                         false-value="no"
-                                        v-model:value="form.submission_use_recaptcha" />
+                                        v-model="form.submission_use_recaptcha" />
                                 <help-button 
                                         :title="$i18n.getHelperTitle('collections', 'submission_use_recaptcha')" 
                                         :message="$i18n.getHelperMessage('collections', 'submission_use_recaptcha')"/>
@@ -358,7 +359,7 @@
                                 :message="$i18n.getHelperMessage('collections', 'status')"/>
                         <div class="status-radios">
                             <b-radio
-                                    v-model:value="form.status"
+                                    v-model="form.status"
                                     v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
                                     :key="index"
                                     :native-value="statusOption.slug">
@@ -505,7 +506,7 @@
                                 size="is-small"
                                 true-value="yes" 
                                 false-value="no"
-                                v-model:value="form.enable_cover_page" />
+                                v-model="form.enable_cover_page" />
                         <help-button 
                                 :title="$i18n.getHelperTitle('collections', 'cover_page_id')" 
                                 :message="$i18n.getHelperMessage('collections', 'cover_page_id')"/>
@@ -513,10 +514,10 @@
                                 id="tainacan-text-cover-page"
                                 :placeholder="$i18n.get('instruction_cover_page')"
                                 :data="coverPages"
-                                v-model:value="coverPageTitle"
+                                v-model="coverPageTitle"
                                 @select="onSelectCoverPage($event)"
                                 :loading="isFetchingPages"
-                                @input="fecthCoverPages"
+                                @update:model-value="fecthCoverPages"
                                 @focus="clearErrors('cover_page_id')"
                                 v-if="coverPage == undefined || coverPage.title == undefined"
                                 :disabled="form.enable_cover_page != 'yes'"
@@ -608,7 +609,7 @@
                         <b-select
                                 expanded
                                 id="tainacan-select-parent"
-                                v-model:value="form.parent"
+                                v-model="form.parent"
                                 @focus="clearErrors('parent')"
                                 :loading="isFetchingCollections"
                                 :placeholder="$i18n.get('instruction_select_a_parent_collection')">
@@ -683,7 +684,7 @@
         </div>
 
         <b-loading 
-                v-model:active="isLoading" 
+                v-model="isLoading" 
                 :can-cancel="false"/>
     </div>
 </template>
diff --git a/src/views/admin/components/edition/exporter-edition-form.vue b/src/views/admin/components/edition/exporter-edition-form.vue
index ec2f481c2..3bc67067b 100644
--- a/src/views/admin/components/edition/exporter-edition-form.vue
+++ b/src/views/admin/components/edition/exporter-edition-form.vue
@@ -6,7 +6,7 @@
                     { path: '', label: exporterType != undefined ? (exporterName != undefined ? exporterName : exporterType) : $i18n.get('title_exporter_page') }
                 ]"/>
         <b-loading
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
         <form
                 @click="formErrorMessage = ''"
@@ -34,9 +34,9 @@
                                 extra-classes="tainacan-repository-tooltip"/>
                         <br>
                         <b-select
-                                @input="formErrorMessage = null"
+                                @update:model-value="formErrorMessage = null"
                                 expanded
-                                v-model:value="selectedCollection"
+                                v-model="selectedCollection"
                                 :loading="isFetchingCollections"
                                 :placeholder="$i18n.get('instruction_select_a_collection')">
                             <option
@@ -55,9 +55,9 @@
                                 exporterSession.mapping_list.length"
                             :label="$i18n.get('mapping')">
                         <b-select
-                                @input="formErrorMessage = null"
+                                @update:model-value="formErrorMessage = null"
                                 expanded
-                                v-model:value="selectedMapping"
+                                v-model="selectedMapping"
                                 :placeholder="$i18n.get('instruction_select_a_mapper')">
                             <option 
                                     v-if="exporterSession.accept_no_mapping"
@@ -81,8 +81,8 @@
                         <b-checkbox
                                 true-value="1"
                                 false-value="0"
-                                v-model:value="sendEmail"
-                                @input="formErrorMessage = null">
+                                v-model="sendEmail"
+                                @update:model-value="formErrorMessage = null">
                             {{ $i18n.get('label_yes') }}
                         </b-checkbox>
                     </b-field>
diff --git a/src/views/admin/components/edition/filter-edition-form.vue b/src/views/admin/components/edition/filter-edition-form.vue
index 312510da9..9adca9f4b 100644
--- a/src/views/admin/components/edition/filter-edition-form.vue
+++ b/src/views/admin/components/edition/filter-edition-form.vue
@@ -18,7 +18,7 @@
                             :message="$i18n.getHelperMessage('filters', 'name')"/>
                 </label>
                 <b-input
-                        v-model:value="form.name" 
+                        v-model="form.name" 
                         name="name" 
                         @focus="clearErrors('name')"/>
             </b-field>
@@ -45,7 +45,7 @@
                         type="textarea" 
                         name="description" 
                         :rows="3"
-                        v-model:value="form.description" 
+                        v-model="form.description" 
                         @focus="clearErrors('description')" />
             </b-field>
 
@@ -64,7 +64,7 @@
                             @focus="clearErrors('label_status')"
                             id="tainacan-select-status-publish"
                             name="status" 
-                            v-model:value="form.status"
+                            v-model="form.status"
                             native-value="publish">
                         <span class="icon has-text-gray3">
                             <i class="tainacan-icon tainacan-icon-public"/>
@@ -76,7 +76,7 @@
                             @focus="clearErrors('label_status')"
                             id="tainacan-select-status-private"
                             name="status" 
-                            v-model:value="form.status"
+                            v-model="form.status"
                             native-value="private">
                         <span class="icon has-text-gray3">
                             <i class="tainacan-icon tainacan-icon-private"/>
@@ -101,7 +101,7 @@
                         class="is-flex">
                     <b-select
                             name="max_options"
-                            v-model:value="form.max_options"
+                            v-model="form.max_options"
                             :placeholder="$i18n.get('instruction_select_max_options_to_show')">
                         <option value="4">4</option>
                         <option value="8">8</option>
@@ -132,7 +132,7 @@
                         class="is-flex">
                     <b-input
                             name="max_options"
-                            v-model:value="form.max_options"
+                            v-model="form.max_options"
                             type="number"
                             step="1" />
                     <button
@@ -160,8 +160,8 @@
                     &nbsp;
                 <b-switch
                         size="is-small"
-                        @input="clearErrors('begin_with_filter_collapsed')"
-                        v-model:value="form.begin_with_filter_collapsed"
+                        @update:model-value="clearErrors('begin_with_filter_collapsed')"
+                        v-model="form.begin_with_filter_collapsed"
                         :true-value="'yes'"
                         :false-value="'no'"
                         :native-value="form.begin_with_filter_collapsed == 'yes' ? 'yes' : 'no'"
@@ -197,8 +197,9 @@
                 <button 
                         type="button"
                         class="button is-outlined" 
-                        @click.prevent="cancelEdition()" 
-                        slot="trigger">{{ $i18n.get('cancel') }}</button>
+                        @click.prevent="cancelEdition()">
+                    {{ $i18n.get('cancel') }}
+                </button>
             </div>
             <div class="control">
                 <b-button 
diff --git a/src/views/admin/components/edition/importer-edition-form.vue b/src/views/admin/components/edition/importer-edition-form.vue
index 07c544cec..72f3978e2 100644
--- a/src/views/admin/components/edition/importer-edition-form.vue
+++ b/src/views/admin/components/edition/importer-edition-form.vue
@@ -29,7 +29,7 @@
                         <br>
                         <b-upload
                                 v-if="importer.tmp_file == undefined && (importerFile == undefined || importerFile == null || importerFile == '')" 
-                                v-model:value="importerFile"
+                                v-model="importerFile"
                                 drag-drop
                                 class="source-file-upload">
                             <section class="drop-inner">
@@ -80,7 +80,7 @@
                                 extra-classes="tainacan-repository-tooltip"/>
                         <b-input
                                 id="tainacan-url-link-source"
-                                v-model:value="url"/>  
+                                v-model="url"/>  
                     </b-field>
                 </div>
 
@@ -109,8 +109,8 @@
                             <b-select
                                     expanded
                                     id="tainacan-select-target-collection"
-                                    :value="collectionId"
-                                    @input="onSelectCollection($event)"
+                                    :model-value="collectionId"
+                                    @update:model-value="onSelectCollection($event)"
                                     :loading="isFetchingCollections"
                                     :placeholder="$i18n.get('instruction_select_a_target_collection')">
                                 <option
@@ -192,7 +192,7 @@
         </form>
         
         <b-loading 
-                v-model:active="isLoading" 
+                v-model="isLoading" 
                 :can-cancel="false"/>
     </div>
 </template>
diff --git a/src/views/admin/components/edition/importer-mapping-form.vue b/src/views/admin/components/edition/importer-mapping-form.vue
index 65d988091..f38efb135 100644
--- a/src/views/admin/components/edition/importer-mapping-form.vue
+++ b/src/views/admin/components/edition/importer-mapping-form.vue
@@ -23,7 +23,7 @@
         </div>
 
         <b-loading 
-                v-model:active="isLoading" 
+                v-model="isLoading" 
                 :can-cancel="false"/>
 
         <form 
@@ -35,7 +35,7 @@
 
             <b-loading 
                     :is-full-page="false"
-                    v-model:active="isLoadingSourceInfo" 
+                    v-model="isLoadingSourceInfo" 
                     :can-cancel="false"/>
             
             <!-- Metadata Mapping -->
@@ -88,8 +88,8 @@
                                 v-if="collectionMetadata != undefined &&
                                     collectionMetadata.length > 0 &&
                                     !isFetchingCollectionMetadata"
-                                :value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)"
-                                @input="onSelectCollectionMetadata($event, sourceMetadatum)"
+                                :model-value="checkCurrentSelectedCollectionMetadatum(sourceMetadatum)"
+                                @update:model-value="onSelectCollectionMetadata($event, sourceMetadatum)"
                                 :placeholder="$i18n.get('label_select_metadatum')">
                             <option :value="null">
                                 {{ $i18n.get('label_select_metadatum') }}
@@ -124,8 +124,8 @@
                                 v-if="collectionMetadata != undefined &&
                                     collectionMetadata.length > 0 &&
                                     !isFetchingCollectionMetadata"
-                                :value="checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)"
-                                @input="onSelectCollectionMetadata($event, Object.entries(sourceMetadatum)[0][0], true, Object.entries(sourceMetadatum)[0][1])"
+                                :model-value="checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true)"
+                                @update:model-value="onSelectCollectionMetadata($event, Object.entries(sourceMetadatum)[0][0], true, Object.entries(sourceMetadatum)[0][1])"
                                 :placeholder="$i18n.get('label_select_metadatum')">
                             <option :value="null">
                                 {{ $i18n.get('label_select_metadatum') }}
@@ -161,8 +161,8 @@
                                             collectionMetadata.length > 0 &&
                                             !isFetchingCollectionMetadata"
                                         :disabled="[undefined, null, false, 'create_metadata' + index].includes(checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))"
-                                        :value="checkCurrentSelectedCollectionChildMetadatum(childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))"
-                                        @input="onSelectCollectionChildMetadata($event, childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true), Object.entries(sourceMetadatum)[0][0])"
+                                        :model-value="checkCurrentSelectedCollectionChildMetadatum(childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true))"
+                                        @update:model-value="onSelectCollectionChildMetadata($event, childSourceMetadatum, checkCurrentSelectedCollectionMetadatum(Object.entries(sourceMetadatum)[0][0], true), Object.entries(sourceMetadatum)[0][0])"
                                         :placeholder="$i18n.get('label_select_metadatum')">
                                     <option :value="null">
                                         {{ $i18n.get('label_select_metadatum') }}
@@ -200,7 +200,7 @@
                 
                 <b-modal 
                         @close="onMetadatumEditionCanceled()"
-                        v-model:active="isNewMetadatumModalActive"
+                        v-model="isNewMetadatumModalActive"
                         trap-focus
                         aria-modal
                         aria-role="dialog"
@@ -214,7 +214,7 @@
                             v-if="selectedMetadatumType == undefined && !isEditingMetadatum">
                         <b-loading 
                                 :is-full-page="isFullPage" 
-                                v-model:active="isLoadingMetadatumTypes"/>
+                                v-model="isLoadingMetadatumTypes"/>
                         <div 
                                 
                                 class="tainacan-modal-content">
@@ -287,7 +287,7 @@
         <!-- Prompt to show title -->
         <b-modal 
                 v-if="importerSourceInfo"
-                v-model:active="showTitlePromptModal"
+                v-model="showTitlePromptModal"
                 :can-cancel="false"
                 :width="820"
                 scroll="keep"
@@ -309,7 +309,7 @@
                         <b-field>
                             <b-select
                                     expanded
-                                    v-model:value="selectedTitle"
+                                    v-model="selectedTitle"
                                     :placeholder="$i18n.get('label_select_metadatum')">
                                 <option
                                         v-for="(sourceMetadatum, index) of importerSourceInfo.source_metadata"
diff --git a/src/views/admin/components/edition/item-bulk-edition-form.vue b/src/views/admin/components/edition/item-bulk-edition-form.vue
index 0490e2030..62c7df4f7 100644
--- a/src/views/admin/components/edition/item-bulk-edition-form.vue
+++ b/src/views/admin/components/edition/item-bulk-edition-form.vue
@@ -2,7 +2,7 @@
     <div>
         <b-loading
                 :is-full-page="false"
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
         <div 
                 v-if="!$adminOptions.hideBulkEditionPageTitle"
@@ -26,10 +26,10 @@
                 <br>
                 <b-upload
                         native
-                        v-model:value="submitedFileList"
+                        v-model="submitedFileList"
                         drag-drop
                         multiple
-                        @input="uploadFiles()"
+                        @update:model-value="uploadFiles()"
                         class="source-file-upload">
                     <section class="drop-inner">
                         <div class="content has-text-centered">
@@ -150,8 +150,9 @@
                         <button 
                                 type="button"
                                 class="button is-outlined" 
-                                @click.prevent="$router.go(-1)" 
-                                slot="trigger">{{ $i18n.get('cancel') }}</button>
+                                @click.prevent="$router.go(-1)">
+                            {{ $i18n.get('cancel') }}
+                        </button>
                     </div>
                     <div 
                             style="margin-left: auto;"
@@ -161,7 +162,9 @@
                                 class="button is-secondary" 
                                 :class="{'is-loading': isCreatingSequenceEditGroup }"
                                 @click.prevent="sequenceEditGroup()"
-                                type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>
+                                type="submit">
+                            {{ $i18n.get('label_sequence_edit_items') }}
+                        </button>
                     </div>
                     <div class="control">
                         <button 
diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index 3a46e1c15..62535b854 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -2,7 +2,7 @@
     <div :class="isCreatingNewItem ? 'item-creation-container' : 'item-edition-container'"><!-- Do NOT remove this classes, they may be used by third party plugins -->
         <b-loading
                 :is-full-page="false"
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
 
         <tainacan-title 
@@ -216,8 +216,7 @@
                                 </ul>
                                 <button 
                                         class="swiper-button-prev" 
-                                        id="tainacan-tabs-prev" 
-                                        slot="button-prev">
+                                        id="tainacan-tabs-prev">
                                     <svg
                                             width="24"
                                             height="24"
@@ -344,7 +343,7 @@
                                                 id="tainacan-switch-required-metadata"
                                                 :style="'font-size: 0.625em;' + (isMobileScreen ? 'margin-right: 2rem;' : '')"
                                                 size="is-small"
-                                                v-model:value="showOnlyRequiredMetadata">
+                                                v-model="showOnlyRequiredMetadata">
                                             {{ isMobileScreen ? $i18n.get('label_required') : $i18n.get('label_only_required') }} *
                                         </b-switch>
 
@@ -354,7 +353,7 @@
                                             <b-input
                                                     v-if="!isMobileScreen || openMetadataNameFilter"
                                                     :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
-                                                    v-model:value="metadataNameFilterString"
+                                                    v-model="metadataNameFilterString"
                                                     icon="magnify"
                                                     size="is-small"
                                                     icon-right="close-circle"
@@ -676,7 +675,7 @@
                                 size="is-small"
                                 true-value="open"
                                 false-value="closed"
-                                v-model:value="form.comment_status">
+                                v-model="form.comment_status">
                             <span class="icon has-text-gray4">
                                 <i class="tainacan-icon tainacan-icon-comment"/>
                             </span>
diff --git a/src/views/admin/components/edition/metadata-section-edition-form.vue b/src/views/admin/components/edition/metadata-section-edition-form.vue
index 30912fda4..c372221a9 100644
--- a/src/views/admin/components/edition/metadata-section-edition-form.vue
+++ b/src/views/admin/components/edition/metadata-section-edition-form.vue
@@ -30,7 +30,7 @@
                                 :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
                     </label>
                     <b-input
-                            v-model:value="form.name"
+                            v-model="form.name"
                             name="name"
                             @focus="clearErrors('name')"/>
                 </b-field>
@@ -59,7 +59,7 @@
                             type="textarea"
                             name="description"
                             rows="3"
-                            v-model:value="form.description"
+                            v-model="form.description"
                             @focus="clearErrors('description')"/>
                 </b-field>
 
@@ -71,8 +71,8 @@
                         &nbsp;
                     <b-switch
                             size="is-small"
-                            @input="clearErrors('description_bellow_name')"
-                            v-model:value="form.description_bellow_name"
+                            @update:model-value="clearErrors('description_bellow_name')"
+                            v-model="form.description_bellow_name"
                             true-value="yes"
                             false-value="no"
                             name="description_bellow_name">
@@ -100,7 +100,7 @@
                                 @focus="clearErrors('label_status')"
                                 id="tainacan-select-status-publish"
                                 name="status"
-                                v-model:value="form.status"
+                                v-model="form.status"
                                 native-value="publish">
                             <span class="icon has-text-gray3">
                                 <i class="tainacan-icon tainacan-icon-public"/>
@@ -111,7 +111,7 @@
                                 @focus="clearErrors('label_status')"
                                 id="tainacan-select-status-private"
                                 name="status"
-                                v-model:value="form.status"
+                                v-model="form.status"
                                 native-value="private">
                             <span class="icon has-text-gray3">
                                 <i class="tainacan-icon tainacan-icon-private"/>
@@ -151,8 +151,8 @@
                             &nbsp;
                         <b-switch
                                 size="is-small"
-                                @input="clearErrors('is_conditional_section')"
-                                v-model:value="form.is_conditional_section"
+                                @update:model-value="clearErrors('is_conditional_section')"
+                                v-model="form.is_conditional_section"
                                 true-value="yes"
                                 false-value="no"
                                 name="is_conditional_section">
@@ -179,7 +179,7 @@
                                         :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
                             </label>
                             <b-select 
-                                    v-model:value="selectedConditionalMetadatum"
+                                    v-model="selectedConditionalMetadatum"
                                     :placeholder="$i18n.get('label_select_metadatum')">
                                 <option 
                                         v-for="conditionalMetadatum of availableConditionalMetadata"
@@ -201,7 +201,7 @@
                             </label>
                             <div style="overflow-y: auto; overflow-x: hidden; max-height: 100px;">
                                 <b-checkbox
-                                        v-model:value="selectedConditionalValue"
+                                        v-model="selectedConditionalValue"
                                         v-for="(conditionalValue, conditionalValueIndex) of availableConditionalMetadata.find((availableMetadatum) => availableMetadatum.id == selectedConditionalMetadatum).metadata_type_object.options.options.split('\n')"
                                         :key="conditionalValueIndex"
                                         :native-value="conditionalValue">
@@ -228,8 +228,8 @@
             <button
                     type="button"
                     class="button is-outlined"
-                    @click.prevent="cancelEdition()"
-                    slot="trigger">{{ $i18n.get('cancel') }}
+                    @click.prevent="cancelEdition()">
+                {{ $i18n.get('cancel') }}
             </button>
         </div>
         <p class="help is-danger">{{ formErrorMessage }}</p>
diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index c6aa224d1..9d484254c 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -38,7 +38,7 @@
                                     :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
                         </label>
                         <b-input
-                                v-model:value="form.name"
+                                v-model="form.name"
                                 name="name"
                                 @focus="clearErrors('name')"/>
                     </b-field>
@@ -67,7 +67,7 @@
                                 type="textarea"
                                 name="description"
                                 rows="3"
-                                v-model:value="form.description"
+                                v-model="form.description"
                                 @focus="clearErrors('description')"/>
                     </b-field>
 
@@ -79,8 +79,8 @@
                             &nbsp;
                         <b-switch
                                 size="is-small"
-                                @input="clearErrors('description_bellow_name')"
-                                v-model:value="form.description_bellow_name"
+                                @update:model-value="clearErrors('description_bellow_name')"
+                                v-model="form.description_bellow_name"
                                 true-value="yes"
                                 false-value="no"
                                 name="description_bellow_name">
@@ -104,7 +104,7 @@
                                     :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
                         </label>
                         <b-input
-                                v-model:value="form.placeholder"
+                                v-model="form.placeholder"
                                 name="placeholder"
                                 @focus="clearErrors('placeholder')"/>
                     </b-field>
@@ -126,7 +126,7 @@
                                     @focus="clearErrors('label_status')"
                                     id="tainacan-select-status-publish"
                                     name="status"
-                                    v-model:value="form.status"
+                                    v-model="form.status"
                                     native-value="publish">
                                 <span class="icon has-text-gray3">
                                     <i class="tainacan-icon tainacan-icon-public"/>
@@ -137,7 +137,7 @@
                                     @focus="clearErrors('label_status')"
                                     id="tainacan-select-status-private"
                                     name="status"
-                                    v-model:value="form.status"
+                                    v-model="form.status"
                                     native-value="private">
                                 <span class="icon has-text-gray3">
                                     <i class="tainacan-icon tainacan-icon-private"/>
@@ -162,8 +162,8 @@
                         </label>
                         <b-select 
                                 expanded
-                                v-model:value="form.display"
-                                @input="clearErrors('display')">
+                                v-model="form.display"
+                                @update:model-value="clearErrors('display')">
                             <option value="yes">
                                 {{ $i18n.get('label_display_default') }}
                             </option>
@@ -185,8 +185,8 @@
                                 :type="formErrors['required'] != undefined ? 'is-danger' : ''"
                                 :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
                             <b-checkbox
-                                    @input="clearErrors('required')"
-                                    v-model:value="form.required"
+                                    @update:model-value="clearErrors('required')"
+                                    v-model="form.required"
                                     true-value="yes"
                                     false-value="no"
                                     class="is-inline-block"
@@ -204,8 +204,8 @@
                                 :type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
                                 :message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
                             <b-checkbox
-                                    @input="clearErrors('collection_key')"
-                                    v-model:value="form.collection_key"
+                                    @update:model-value="clearErrors('collection_key')"
+                                    v-model="form.collection_key"
                                     true-value="yes"
                                     false-value="no"
                                     class="is-inline-block"
@@ -223,8 +223,8 @@
                                 :type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
                                 :message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
                             <b-checkbox
-                                    @input="clearErrors('multiple')"
-                                    v-model:value="form.multiple"
+                                    @update:model-value="clearErrors('multiple')"
+                                    v-model="form.multiple"
                                     true-value="yes"
                                     false-value="no"
                                     class="is-inline-block"
@@ -247,7 +247,7 @@
                         <b-switch
                                 size="is-small"
                                 :disabled="form.multiple != 'yes'"
-                                v-model:value="showCardinalityOptions" />
+                                v-model="showCardinalityOptions" />
                     </b-field>
 
                     <b-field
@@ -267,14 +267,14 @@
                                 name="cardinality"
                                 step="1"
                                 min="2"
-                                v-model:value="form.cardinality"/>
+                                v-model="form.cardinality"/>
                     </b-field>
 
                     <b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
                         <b-checkbox
                                 class="is-inline-block"
-                                v-model:value="form.repository_level"
-                                @input="clearErrors('repository_level')"
+                                v-model="form.repository_level"
+                                @update:model-value="clearErrors('repository_level')"
                                 name="repository_level"
                                 true-value="yes"
                                 false-value="no">
@@ -354,7 +354,7 @@
                                         :extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
                             </label>
                             <b-input
-                                    v-model:value="form.semantic_uri"
+                                    v-model="form.semantic_uri"
                                     name="semantic_uri"
                                     type="url"
                                     @focus="clearErrors('semantic_uri')"/>
@@ -369,8 +369,8 @@
             <button
                     type="button"
                     class="button is-outlined"
-                    @click.prevent="cancelEdition()"
-                    slot="trigger">{{ $i18n.get('cancel') }}
+                    @click.prevent="cancelEdition()">
+                {{ $i18n.get('cancel') }}
             </button>
         </div>
         <p class="help is-danger">{{ formErrorMessage }}</p>
diff --git a/src/views/admin/components/edition/taxonomy-edition-form.vue b/src/views/admin/components/edition/taxonomy-edition-form.vue
index 38b60583b..9220e2a9a 100644
--- a/src/views/admin/components/edition/taxonomy-edition-form.vue
+++ b/src/views/admin/components/edition/taxonomy-edition-form.vue
@@ -27,7 +27,7 @@
                                     extra-classes="tainacan-repository-tooltip"/>
                             <b-input
                                     id="tainacan-text-name"
-                                    v-model:value="form.name"
+                                    v-model="form.name"
                                     @focus="clearErrors('name')"
                                     @blur="updateSlug()"
                                     :disabled="isUpdatingSlug"
@@ -56,7 +56,7 @@
                                     id="tainacan-text-description"
                                     type="textarea"
                                     rows="3"
-                                    v-model:value="form.description"
+                                    v-model="form.description"
                                     @focus="clearErrors('description')"/>
                         </b-field>
 
@@ -67,7 +67,7 @@
                                     <b-switch
                                             id="tainacan-checkbox-allow-insert" 
                                             size="is-small"
-                                            v-model:value="form.allowInsert"
+                                            v-model="form.allowInsert"
                                             true-value="yes"
                                             false-value="no" />
                                     <help-button 
@@ -84,7 +84,7 @@
                                     <b-switch
                                             id="tainacan-checkbox-allow-insert" 
                                             size="is-small"
-                                            v-model:value="form.hierarchical"
+                                            v-model="form.hierarchical"
                                             true-value="yes"
                                             false-value="no" />
                                     <help-button 
@@ -105,9 +105,9 @@
                                     :message="$i18n.getHelperMessage('taxonomies', 'slug')"
                                     extra-classes="tainacan-repository-tooltip"/>
                             <b-input
-                                    @input="updateSlug()"
+                                    @update:model-value="updateSlug()"
                                     id="tainacan-text-slug"
-                                    v-model:value="form.slug"
+                                    v-model="form.slug"
                                     @focus="clearErrors('slug')"
                                     :disabled="isUpdatingSlug"/>
                         </b-field>
@@ -132,7 +132,7 @@
                                         :native-value="wpPostType.slug"
                                         :true-value="wpPostType.slug"
                                         false-value=""
-                                        v-model:value="form.enabledPostTypes"
+                                        v-model="form.enabledPostTypes"
                                         name="enabled_post_types" >
                                         {{ wpPostType.label }}  
                                     </b-checkbox>
@@ -156,7 +156,7 @@
                                     extra-classes="tainacan-repository-tooltip"/>
                             <div class="status-radios">
                                 <b-radio
-                                        v-model:value="form.status"
+                                        v-model="form.status"
                                         v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
                                         :key="index"
                                         :native-value="statusOption.slug">
@@ -258,7 +258,7 @@
             </div>
 
             <b-loading 
-                    v-model:active="isLoadingTaxonomy" 
+                    v-model="isLoadingTaxonomy" 
                     :can-cancel="false"/>
 
         </div>
diff --git a/src/views/admin/components/edition/term-edition-form.vue b/src/views/admin/components/edition/term-edition-form.vue
index f347c9517..5afcf6e84 100644
--- a/src/views/admin/components/edition/term-edition-form.vue
+++ b/src/views/admin/components/edition/term-edition-form.vue
@@ -25,7 +25,7 @@
         <div class="modal-card-body">
             <b-loading
                     :is-full-page="false"
-                    v-model:active="isLoading" />
+                    v-model="isLoading" />
 
             <!-- Name -------------- -->
             <b-field
@@ -42,7 +42,7 @@
                 </label>
                 <b-input
                         :placeholder="$i18n.get('label_term_without_name')"
-                        v-model:value="form.name"
+                        v-model="form.name"
                         name="name"
                         @focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
             </b-field>
@@ -126,7 +126,7 @@
                         <b-input
                                 type="textarea"
                                 name="description"
-                                v-model:value="form.description"
+                                v-model="form.description"
                                 @focus="clearErrors('description')"/>
                     </b-field>
                 </div>
@@ -141,10 +141,10 @@
             <label class="label is-inline">
                     {{ $i18n.get('label_parent_term') }}
                     <b-switch
-                            @input="onToggleSwitch()"
+                            @update:model-value="onToggleSwitch()"
                             id="tainacan-checkbox-has-parent" 
                             size="is-small"
-                            v-model:value="hasParent" />
+                            v-model="hasParent" />
                     <help-button
                             :title="$i18n.get('label_parent_term')"
                             :message="$i18n.get('info_help_parent_term')"
@@ -156,10 +156,10 @@
                         :data="parentTerms"
                         field="name"
                         clearable
-                        v-model:value="parentTermName"
+                        v-model="parentTermName"
                         @select="onSelectParentTerm($event)"
                         :loading="isFetchingParentTerms"
-                        @input="fetchParentTerms"
+                        @update:model-value="fetchParentTerms"
                         @focus="clearErrors('parent');"
                         :disabled="!hasParent"
                         :append-to-body="true"
@@ -204,8 +204,7 @@
                     <button
                             type="button"
                             class="button is-outlined"
-                            @click.prevent="cancelEdition()"
-                            slot="trigger">
+                            @click.prevent="cancelEdition()">
                         {{ $i18n.get('cancel') }}
                     </button>
                 </div>
diff --git a/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue b/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
index 749ea38e9..d5b964a48 100644
--- a/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
+++ b/src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
@@ -4,11 +4,11 @@
                 icon="magnify"
                 size="is-small"
                 :aria-labelledby="'filter-label-id-' + filter.id"
-                v-model:value="selected"
+                v-model="selected"
                 :data="options"
                 expanded
                 :loading="isLoadingOptions"
-                @input="($event) => { resetPage(); search($event); }"
+                @update:model-value="($event) => { resetPage(); search($event); }"
                 field="label"
                 @select="onSelect"
                 clearable
diff --git a/src/views/admin/components/filter-types/checkbox/Checkbox.vue b/src/views/admin/components/filter-types/checkbox/Checkbox.vue
index 3f11860a7..7ab89a33b 100644
--- a/src/views/admin/components/filter-types/checkbox/Checkbox.vue
+++ b/src/views/admin/components/filter-types/checkbox/Checkbox.vue
@@ -107,10 +107,10 @@
                 this.loadOptions();
         },
         created() {
-            this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions);
+            this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
         },
         beforeUnmount() {
-            this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); 
+            this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions); 
         },
         methods: {
             reloadOptions(shouldReload) {
diff --git a/src/views/admin/components/filter-types/date-interval/DateInterval.vue b/src/views/admin/components/filter-types/date-interval/DateInterval.vue
index 7dc5a0e43..ef8dbf9a0 100644
--- a/src/views/admin/components/filter-types/date-interval/DateInterval.vue
+++ b/src/views/admin/components/filter-types/date-interval/DateInterval.vue
@@ -3,9 +3,9 @@
         <b-datepicker
                 :aria-labelledby="'filter-label-id-' + filter.id"
                 :placeholder="$i18n.get('label_selectbox_init')"
-                v-model:value="dateInit"
+                v-model="dateInit"
                 @focus="isTouched = true"
-                @input="($event) => { resetPage(); validadeValues($event) }"
+                @update:model-value="($event) => { resetPage(); validadeValues($event) }"
                 editable
                 :trap-focus="false"
                 :date-formatter="(date) => dateFormatter(date)"
@@ -29,8 +29,8 @@
         <b-datepicker
                 :aria-labelledby="'filter-label-id-' + filter.id"
                 :placeholder="$i18n.get('label_selectbox_init')"
-                v-model:value="dateEnd"
-                @input="validadeValues()"
+                v-model="dateEnd"
+                @update:model-value="validadeValues()"
                 @focus="isTouched = true"
                 editable
                 :trap-focus="false"
diff --git a/src/views/admin/components/filter-types/date/Date.vue b/src/views/admin/components/filter-types/date/Date.vue
index 4e8a6a902..bc003e078 100644
--- a/src/views/admin/components/filter-types/date/Date.vue
+++ b/src/views/admin/components/filter-types/date/Date.vue
@@ -2,20 +2,21 @@
     <div class="date-filter-container">
          <b-dropdown
                 :mobile-modal="true"
-                @input="($event) => { resetPage(); onChangeComparator($event) }"
+                @update:model-value="($event) => { resetPage(); onChangeComparator($event) }"
                 aria-role="list"
                 trap-focus>
-            <button
-                    :aria-label="$i18n.get('label_comparator')"
-                    class="button is-white"
-                    slot="trigger">
-                <span class="icon is-small">
-                    <i v-html="comparatorSymbol" />
-                </span>
-                <span class="icon">
-                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                </span>
-            </button>
+            <template #trigger>
+                <button
+                        :aria-label="$i18n.get('label_comparator')"
+                        class="button is-white">
+                    <span class="icon is-small">
+                        <i v-html="comparatorSymbol" />
+                    </span>
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                    </span>
+                </button>
+            </template>
             <b-dropdown-item
                     role="button"
                     :class="{ 'is-active': comparator == '=' }"
@@ -67,14 +68,14 @@
                 :aria-plus-label="$i18n.get('label_increase')"
                 size="is-small"
                 step="1"
-                @input="emitOnlyYear($event)"
-                v-model:value="yearsOnlyValue"/> -->
+                @update:model-value="emitOnlyYear($event)"
+                v-model="yearsOnlyValue"/> -->
         <b-datepicker
                 position="is-bottom-left"
                 :aria-labelledby="'filter-label-id-' + filter.id"
                 :placeholder="$i18n.get('instruction_select_a_date')"
-                v-model:value="value"
-                @input="($event) => { resetPage(); emit($event); }"
+                v-model="value"
+                @update:model-value="($event) => { resetPage(); emit($event); }"
                 editable
                 :trap-focus="false"
                 :date-formatter="(date) => dateFormatter(date)"
diff --git a/src/views/admin/components/filter-types/date/FormDate.vue b/src/views/admin/components/filter-types/date/FormDate.vue
index e0e8e00b2..d83882783 100644
--- a/src/views/admin/components/filter-types/date/FormDate.vue
+++ b/src/views/admin/components/filter-types/date/FormDate.vue
@@ -9,8 +9,8 @@
             </label>
             <b-select
                     name="type_options"
-                    v-model:value="type"
-                    @input="onUpdateType">
+                    v-model="type"
+                    @update:model-value="onUpdateType">
                 <option value="day">{{ $i18n.get('label_day') }}</option>
                 <option value="month">{{ $i18n.get('label_month') }}</option>
                 <option value="year">{{ $i18n.get('label_year') }}</option>
diff --git a/src/views/admin/components/filter-types/numeric-interval/FormNumericInterval.vue b/src/views/admin/components/filter-types/numeric-interval/FormNumericInterval.vue
index 1fe54d5bc..d990e7cef 100644
--- a/src/views/admin/components/filter-types/numeric-interval/FormNumericInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-interval/FormNumericInterval.vue
@@ -12,8 +12,8 @@
                     class="is-flex">
                 <b-select
                         name="step_options"
-                        v-model:value="step"
-                        @input="onUpdateStep">
+                        v-model="step"
+                        @update:model-value="onUpdateStep">
                     <option value="0.001">0.001</option>
                     <option value="0.01">0.01</option>
                     <option value="0.1">0.1</option>
@@ -49,8 +49,8 @@
                     class="is-flex">
                 <b-input
                         name="max_options"
-                        v-model:value="step"
-                        @input="onUpdateStep"
+                        v-model="step"
+                        @update:model-value="onUpdateStep"
                         type="number"
                         step="1" />
                 <button
diff --git a/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue b/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
index 8772b6d47..d67b292ef 100644
--- a/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-interval/NumericInterval.vue
@@ -5,9 +5,9 @@
                 :aria-minus-label="$i18n.get('label_decrease')"
                 :aria-plus-label="$i18n.get('label_increase')"
                 size="is-small"
-                @input="($event) => { resetPage(); validadeValues($event) }"
+                @update:model-value="($event) => { resetPage(); validadeValues($event) }"
                 :step="filterTypeOptions.step"
-                v-model:value="valueInit"
+                v-model="valueInit"
                 />
         <p 
                 style="font-size: 0.75em; margin-bottom: 0.125em;"
@@ -19,9 +19,9 @@
                 :aria-minus-label="$i18n.get('label_decrease')"
                 :aria-plus-label="$i18n.get('label_increase')"
                 size="is-small"
-                @input="($event) => { resetPage(); validadeValues($event) }"
+                @update:model-value="($event) => { resetPage(); validadeValues($event) }"
                 :step="filterTypeOptions.step"
-                v-model:value="valueEnd"/>
+                v-model="valueEnd"/>
         
     </div>
 </template>
diff --git a/src/views/admin/components/filter-types/numeric-list-interval/FormNumericListInterval.vue b/src/views/admin/components/filter-types/numeric-list-interval/FormNumericListInterval.vue
index 990c367d0..9605dbf6e 100644
--- a/src/views/admin/components/filter-types/numeric-list-interval/FormNumericListInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-list-interval/FormNumericListInterval.vue
@@ -10,8 +10,8 @@
             <div>
                 <b-field>
                     <b-checkbox
-                            v-model:value="showIntervalOnTag"
-                            @input="onUpdateShowIntervalOnTag()">
+                            v-model="showIntervalOnTag"
+                            @update:model-value="onUpdateShowIntervalOnTag()">
                         {{ $i18n.get('info_show_interval_on_tag') }}
                     </b-checkbox>
                 </b-field>
@@ -33,8 +33,8 @@
                         <b-input
                                 expanded
                                 :placeholder="$i18n.get('label')"
-                                @input="onUpdate(interval)"
-                                v-model:value="interval.label" />
+                                @update:model-value="onUpdate(interval)"
+                                v-model="interval.label" />
                     </b-field>
                     <b-field>
                         <b-input
@@ -42,15 +42,15 @@
                                 type="number"
                                 step="0.01"
                                 :placeholder="$i18n.get('info_initial_value')"
-                                @input="onUpdate(interval, true)"
-                                v-model:value="interval.from" />
+                                @update:model-value="onUpdate(interval, true)"
+                                v-model="interval.from" />
                         <b-input
                                 expanded
                                 type="number"
                                 step="0.01"
                                 :placeholder="$i18n.get('info_final_value')"
-                                @input="onUpdate(interval, true)"
-                                v-model:value="interval.to" />
+                                @update:model-value="onUpdate(interval, true)"
+                                v-model="interval.to" />
                     </b-field>
                     <p class="control">
                         <a
diff --git a/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue b/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
index f194c4365..be9e64c60 100644
--- a/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
+++ b/src/views/admin/components/filter-types/numeric-list-interval/NumericListInterval.vue
@@ -3,8 +3,8 @@
         <b-select
                 expanded
                 :placeholder="$i18n.get('instruction_select_a_interval')"
-                @input="($event) => { resetPage; changeInterval($event) }"
-                v-model:value="selectedInterval">
+                @update:model-value="($event) => { resetPage; changeInterval($event) }"
+                v-model="selectedInterval">
             <option value="">
                 {{ $i18n.get('label_selectbox_init') }}...
             </option>
diff --git a/src/views/admin/components/filter-types/numeric/FormNumeric.vue b/src/views/admin/components/filter-types/numeric/FormNumeric.vue
index be3427853..aef7614c5 100644
--- a/src/views/admin/components/filter-types/numeric/FormNumeric.vue
+++ b/src/views/admin/components/filter-types/numeric/FormNumeric.vue
@@ -12,8 +12,8 @@
                     class="is-flex">
                 <b-select
                         name="step_options"
-                        v-model:value="step"
-                        @input="onUpdateStep">
+                        v-model="step"
+                        @update:model-value="onUpdateStep">
                     <option value="0.001">0.001</option>
                     <option value="0.01">0.01</option>
                     <option value="0.1">0.1</option>
@@ -49,8 +49,8 @@
                     class="is-flex">
                 <b-input
                         name="max_options"
-                        v-model:value="step"
-                        @input="onUpdateStep"
+                        v-model="step"
+                        @update:model-value="onUpdateStep"
                         type="number"
                         step="1" />
                 <button
diff --git a/src/views/admin/components/filter-types/numeric/Numeric.vue b/src/views/admin/components/filter-types/numeric/Numeric.vue
index a80ba94fc..2a1b2b9b9 100644
--- a/src/views/admin/components/filter-types/numeric/Numeric.vue
+++ b/src/views/admin/components/filter-types/numeric/Numeric.vue
@@ -2,20 +2,21 @@
     <div class="numeric-filter-container">
          <b-dropdown
                 :mobile-modal="true"
-                @input="($event) => { resetPage(); onChangeComparator($event) }"
+                @update:model-value="($event) => { resetPage(); onChangeComparator($event) }"
                 aria-role="list"
                 trap-focus>
-            <button
-                    :aria-label="$i18n.get('label_comparator')"
-                    class="button is-white"
-                    slot="trigger">
-                <span class="icon is-small">
-                    <i v-html="comparatorSymbol" />
-                </span>
-                <span class="icon">
-                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                </span>
-            </button>
+            <template #trigger>
+                <button
+                        :aria-label="$i18n.get('label_comparator')"
+                        class="button is-white">
+                    <span class="icon is-small">
+                        <i v-html="comparatorSymbol" />
+                    </span>
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                    </span>
+                </button>
+            </template>
             <b-dropdown-item
                     role="button"
                     :class="{ 'is-active': comparator == '=' }"
@@ -66,8 +67,8 @@
                 :aria-plus-label="$i18n.get('label_increase')"
                 size="is-small"
                 :step="Number(filterTypeOptions.step)"
-                @input="($event) => { resetPage($event); emit($event); }"
-                v-model:value="value"/>
+                @update:model-value="($event) => { resetPage($event); emit($event); }"
+                v-model="value"/>
     </div>
 </template>
 
diff --git a/src/views/admin/components/filter-types/selectbox/Selectbox.vue b/src/views/admin/components/filter-types/selectbox/Selectbox.vue
index cc22c23b7..e58f0bf7e 100644
--- a/src/views/admin/components/filter-types/selectbox/Selectbox.vue
+++ b/src/views/admin/components/filter-types/selectbox/Selectbox.vue
@@ -4,9 +4,9 @@
             class="block">
         <b-select
                 v-if="!isLoadingOptions"
-                :value="selected"
+                :model-value="selected"
                 :aria-labelledby="'filter-label-id-' + filter.id"
-                @input="($event) => { resetPage(); onSelect($event) }"
+                @update:model-value="($event) => { resetPage(); onSelect($event) }"
                 :placeholder="$i18n.get('label_selectbox_init')"
                 expanded>
             <option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
@@ -55,10 +55,10 @@
                 this.loadOptions(); 
         },
         created() {
-            this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions);
+            this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions);
         },
         beforeUnmount() {
-            this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); 
+            this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions); 
         },
         methods: {
             reloadOptions(shouldReload) {
diff --git a/src/views/admin/components/filter-types/taginput/Taginput.vue b/src/views/admin/components/filter-types/taginput/Taginput.vue
index 8d3a17219..bd8f46126 100644
--- a/src/views/admin/components/filter-types/taginput/Taginput.vue
+++ b/src/views/admin/components/filter-types/taginput/Taginput.vue
@@ -10,7 +10,7 @@
                 :remove-on-keys="[]"
                 field="label"
                 attached
-                @input="($event) => { resetPage(); onSelect($event) }"
+                @update:model-value="($event) => { resetPage(); onSelect($event) }"
                 @typing="search"
                 :aria-close-label="$i18n.get('remove_value')"
                 :aria-labelledby="'filter-label-id-' + filter.id"
diff --git a/src/views/admin/components/filter-types/tainacan-filter-item.vue b/src/views/admin/components/filter-types/tainacan-filter-item.vue
index 763b719d1..b3dadbf83 100644
--- a/src/views/admin/components/filter-types/tainacan-filter-item.vue
+++ b/src/views/admin/components/filter-types/tainacan-filter-item.vue
@@ -8,38 +8,38 @@
         <b-collapse
                 v-if="displayFilter"
                 class="show" 
-                v-model:open="singleCollapseOpen"
+                v-model="singleCollapseOpen"
                 animation="filter-item">
-            <button
-                    :for="'filter-input-id-' + filter.id"
-                    :aria-controls="'filter-input-id-' + filter.id"
-                    :aria-expanded="singleCollapseOpen"
-                    v-tooltip="{
-                        delay: {
-                            shown: 500,
-                            hide: 300,
-                        },
-                        content: filter.name,
-                        html: false,
-                        autoHide: false,
-                        placement: 'top-start',
-                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
-                    }"
-                    :id="'filter-label-id-' + filter.id"
-                    :aria-label="filter.name"
-                    class="label"
-                    slot="trigger"
-                    slot-scope="props">
-                <span class="icon">
-                    <i 
-                            :class="{
-                                'tainacan-icon-arrowdown' : props.open,
-                                'tainacan-icon-arrowright' : !props.open
-                            }"
-                            class="tainacan-icon tainacan-icon-1-25em"/>
-                </span>
-                <span class="collapse-label">{{ filter.name }}</span>
-            </button>
+            <template #trigger="{ props }">
+                <button
+                        :for="'filter-input-id-' + filter.id"
+                        :aria-controls="'filter-input-id-' + filter.id"
+                        :aria-expanded="singleCollapseOpen"
+                        v-tooltip="{
+                            delay: {
+                                shown: 500,
+                                hide: 300,
+                            },
+                            content: filter.name,
+                            html: false,
+                            autoHide: false,
+                            placement: 'top-start',
+                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
+                        }"
+                        :id="'filter-label-id-' + filter.id"
+                        :aria-label="filter.name"
+                        class="label">
+                    <span class="icon">
+                        <i 
+                                :class="{
+                                    'tainacan-icon-arrowdown' : props.open,
+                                    'tainacan-icon-arrowright' : !props.open
+                                }"
+                                class="tainacan-icon tainacan-icon-1-25em"/>
+                    </span>
+                    <span class="collapse-label">{{ filter.name }}</span>
+                </button>
+            </template>
             <div :id="'filter-input-id-' + filter.id">
                 <component
                         :is="filter.filter_type_object ? filter.filter_type_object.component : null"
@@ -150,7 +150,7 @@
         },
         methods: {
             onInput(inputEvent) {
-                this.$eventBusSearch.$emit('input', inputEvent);
+                this.$eventBusSearchEmitter.emit('input', inputEvent);
             },
             onFilterUpdateParentCollapse(open) {
                 const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox'];
diff --git a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
index cf0b42105..d5e9fd821 100644
--- a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
@@ -133,7 +133,7 @@
                     this.taxonomyId = this.filter.metadatum.metadata_type_object.options.taxonomy_id;
                     this.taxonomy = this.filter.metadatum.metadata_type_object.options.taxonomy;
                 }
-            this.$eventBusSearch.$emitter.on('hasToReloadFacets', this.reloadOptions); 
+            this.$eventBusSearchEmitter.on('hasToReloadFacets', this.reloadOptions); 
         },
         mounted(){
             if (!this.isUsingElasticSearch)
@@ -145,7 +145,7 @@
             if (this.getOptionsValuesCancel != undefined)
                 this.getOptionsValuesCancel.cancel('Facet search Canceled.');
 
-            this.$eventBusSearch.$emitter.off('hasToReloadFacets', this.reloadOptions); 
+            this.$eventBusSearchEmitter.off('hasToReloadFacets', this.reloadOptions); 
         }, 
         methods: {
             ...mapGetters('search', [
diff --git a/src/views/admin/components/filter-types/taxonomy/Taginput.vue b/src/views/admin/components/filter-types/taxonomy/Taginput.vue
index dc89558d7..15356d2f1 100644
--- a/src/views/admin/components/filter-types/taxonomy/Taginput.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Taginput.vue
@@ -14,7 +14,7 @@
                 :aria-labelledby="'filter-label-id-' + filter.id"
                 :class="{'has-selected': selected != undefined && selected != []}"
                 @typing="search"
-                @input="($event) => { resetPage(); onSelect($event) }"
+                @update:model-value="($event) => { resetPage(); onSelect($event) }"
                 :placeholder="$i18n.get('info_type_to_add_terms')"
                 check-infinite-scroll
                 @infinite-scroll="searchMore">
diff --git a/src/views/admin/components/lists/attachments-list.vue b/src/views/admin/components/lists/attachments-list.vue
index f40d74e3d..d174adde8 100644
--- a/src/views/admin/components/lists/attachments-list.vue
+++ b/src/views/admin/components/lists/attachments-list.vue
@@ -5,7 +5,7 @@
                 class="table-container">
             <b-loading
                     :is-full-page="false" 
-                    v-model:active="isLoading" />
+                    v-model="isLoading" />
             <div
                     v-if="attachments.length > 0"
                     class="table-wrapper">
@@ -74,7 +74,7 @@
                 <b-pagination
                         @change="onPageChange"
                         :total="totalAttachments"
-                        v-model:current="attachmentsPage"
+                        v-model="attachmentsPage"
                         order="is-centered"
                         size="is-small"
                         :per-page="attachmentsPerPage"
diff --git a/src/views/admin/components/lists/collection-metadata-list.vue b/src/views/admin/components/lists/collection-metadata-list.vue
index 31fdb6d3d..5ea103af6 100644
--- a/src/views/admin/components/lists/collection-metadata-list.vue
+++ b/src/views/admin/components/lists/collection-metadata-list.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="column">
                            
-        <b-loading v-model:active="isLoadingMetadataSections"/>
+        <b-loading v-model="isLoadingMetadataSections"/>
 
         <div class="tainacan-form sub-header">
             <template v-if="activeMetadataSectionsList">
@@ -27,15 +27,16 @@
                             class="show metadata-options-dropdown"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_filter_by_metadata_type')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_filter_by_metadata_type')"
+                                    class="button is-white">
+                                <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                                </span>
+                            </button>
+                        </template>
                         <div class="metadata-options-container">
                             <b-dropdown-item
                                     v-for="(metadataType, index) in metadataTypeFilterOptions"
@@ -44,7 +45,7 @@
                                     custom
                                     aria-role="listitem">
                                 <b-checkbox
-                                        v-model:value="metadataType.enabled"
+                                        v-model="metadataType.enabled"
                                         :native-value="metadataType.enabled">
                                     {{ metadataType.name }}
                                 </b-checkbox>
@@ -55,7 +56,7 @@
                 <b-field class="header-item">
                     <b-input 
                             :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
-                            v-model:value="metadataNameFilterString"
+                            v-model="metadataNameFilterString"
                             icon="magnify"
                             size="is-small"
                             icon-right="close-circle"
@@ -79,419 +80,436 @@
         </section>
 
         <!-- The Metadata Sections list -->
-        <draggable 
-                v-model:value="activeMetadataSectionsList"
+        <sortable
+                :list="activeMetadataSectionsList"
+                item-key="id"
                 class="active-metadata-sections-area"
-                @change="handleSectionChange($event)"
-                :group="{ name:'metadata-sections', pull: false, put: [ 'metadata-sections' ] }"
-                :sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)"
-                :handle="'.handle'"
-                ghost-class="sortable-ghost"
-                chosen-class="sortable-chosen"
-                filter=".not-sortable-item"
-                :prevent-on-filter="false"
-                :animation="250">
-            <div    
-                    v-for="(metadataSection, sectionIndex) in activeMetadataSectionsList"
-                    :key="metadataSection.id">
-                <div 
-                        class="active-metadata-sections-item"
-                        :class="{
-                            'is-compact-item': !isCollapseOpen(metadataSection.id),
-                            'not-sortable-item': 
-                                metadataSection.id == undefined ||
-                                openedMetadatumId != '' ||
-                                openedMetadataSectionId != '' ||
-                                isUpdatingMetadataOrder ||
-                                isUpdatingMetadatum ||
-                                isUpdatingMetadataSectionsOrder ||
-                                metadataNameFilterString != '' ||
-                                hasSomeMetadataTypeFilterApplied,
-                            'not-focusable-item': openedMetadataSectionId == metadataSection.id,
-                            'disabled-metadatum': metadataSection.enabled == false,
-                            'inherited-metadatum': false
-                        }">
+                @update="handleSectionChange($event)"
+                @add="handleSectionChange($event)"
+                @remove="handleSectionChange($event)"
+                :options="{
+                    group: {
+                        name:'metadata-sections',
+                        pull: false,
+                        put: [ 'metadata-sections' ]
+                    },
+                    sort: (openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined),
+                    handle: '.handle',
+                    ghostClass: 'sortable-ghost',
+                    chosenClass: 'sortable-chosen',
+                    filter: '.not-sortable-item',
+                    preventOnFilter: false,
+                    animation: 250
+                }">
+            <template #item="{ element: metadataSection, index: sectionIndex }">
+                <div :key="metadataSection.id">
                     <div 
-                            :ref="'metadata-section-handler-' + metadataSection.id"
-                            class="handle">
-                        <span class="sorting-buttons">
-                            <button 
-                                    :disabled="sectionIndex == 0"
-                                    class="link-button"
-                                    @click="moveMetadataSectionUpViaButon(sectionIndex)">
-                                <span class="icon">
-                                    <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
-                                </span>
-                            </button>
-                            <button 
-                                    :disabled="sectionIndex == activeMetadataSectionsList.length - 1"
-                                    class="link-button"
-                                    @click="moveMetadataSectionDownViaButton(sectionIndex)">
-                                <span class="icon">
-                                    <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
-                                </span>
-                            </button>
-                        </span>
-                        <span 
-                                :style="{ opacity: !(metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
-                                v-tooltip="{
-                                    content: metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata_sections') : $i18n.get('instruction_drag_and_drop_metadata_sections_sort'),
-                                    autoHide: true,
-                                    popperClass: ['tainacan-tooltip', 'tooltip'],
-                                    placement: 'auto-start'
-                                }"
-                                class="icon grip-icon">
-                            <svg 
-                                    xmlns="http://www.w3.org/2000/svg" 
-                                    height="24px"
-                                    viewBox="0 0 24 24"
-                                    width="24px"
-                                    fill="currentColor">
-                                <path
-                                        d="M0 0h24v24H0V0z"
-                                        fill="transparent"/>
-                                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                            </svg>
-                        </span>
-                        <span class="metadatum-name">
-                            <h3>{{ metadataSection.name }}</h3>
-                        </span>
-                        <span   
-                                v-if="metadataSection.id != undefined"
-                                class="label-details"
-                                :class="{ 'has-text-weight-bold': metadataSection.id === 'default_section' }">
+                            class="active-metadata-sections-item"
+                            :class="{
+                                'is-compact-item': !isCollapseOpen(metadataSection.id),
+                                'not-sortable-item': 
+                                    metadataSection.id == undefined ||
+                                    openedMetadatumId != '' ||
+                                    openedMetadataSectionId != '' ||
+                                    isUpdatingMetadataOrder ||
+                                    isUpdatingMetadatum ||
+                                    isUpdatingMetadataSectionsOrder ||
+                                    metadataNameFilterString != '' ||
+                                    hasSomeMetadataTypeFilterApplied,
+                                'not-focusable-item': openedMetadataSectionId == metadataSection.id,
+                                'disabled-metadatum': metadataSection.enabled == false,
+                                'inherited-metadatum': false
+                            }">
+                        <div 
+                                :ref="'metadata-section-handler-' + metadataSection.id"
+                                class="handle">
+                            <span class="sorting-buttons">
+                                <button 
+                                        :disabled="sectionIndex == 0"
+                                        class="link-button"
+                                        @click="moveMetadataSectionUpViaButon(sectionIndex)">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
+                                    </span>
+                                </button>
+                                <button 
+                                        :disabled="sectionIndex == activeMetadataSectionsList.length - 1"
+                                        class="link-button"
+                                        @click="moveMetadataSectionDownViaButton(sectionIndex)">
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
+                                    </span>
+                                </button>
+                            </span>
                             <span 
-                                    v-if="metadataSection.id === 'default_section'"
+                                    :style="{ opacity: !(metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
                                     v-tooltip="{
-                                        content: $i18n.get('label_required'),
+                                        content: metadataSection.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || openedMetadataSectionId != '' || isUpdatingMetadataSectionsOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata_sections') : $i18n.get('instruction_drag_and_drop_metadata_sections_sort'),
                                         autoHide: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip'],
                                         placement: 'auto-start'
-                                    }">
-                                *&nbsp;({{ $i18n.get('label_default_section') }}) 
+                                    }"
+                                    class="icon grip-icon">
+                                <svg 
+                                        xmlns="http://www.w3.org/2000/svg" 
+                                        height="24px"
+                                        viewBox="0 0 24 24"
+                                        width="24px"
+                                        fill="currentColor">
+                                    <path
+                                            d="M0 0h24v24H0V0z"
+                                            fill="transparent"/>
+                                    <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                                </svg>
                             </span>
-                            <span 
-                                    v-if="metadataSection.status === 'private'"
-                                    class="icon"
-                                    v-tooltip="{
-                                        content: $i18n.get('status_private'),
-                                        autoHide: true,
-                                        popperClass: ['tainacan-tooltip', 'tooltip'],
-                                        placement: 'auto-start'
-                                    }">
-                                <i class="tainacan-icon tainacan-icon-private"/>
+                            <span class="metadatum-name">
+                                <h3>{{ metadataSection.name }}</h3>
                             </span>
-                        </span>
-                        <span 
-                                class="loading-spinner" 
-                                v-if="metadataSection.id == undefined"/>
-                        <span 
-                                class="controls" 
-                                v-if="metadataSection.id !== undefined">
-                            <b-switch 
-                                    :disabled="isUpdatingMetadataSectionsOrder"
-                                    size="is-small" 
-                                    :value="metadataSection.enabled"
-                                    @input="onChangeEnableSection($event, sectionIndex)"/>
-                            <a 
-                                    v-if="metadataSection.current_user_can_edit"
-                                    :style="{ visibility: 
-                                            metadataSection.collection_id != collectionId
-                                            ? 'hidden' : 'visible'
-                                        }" 
-                                    @click.prevent="toggleMetadataSectionEdition(metadataSection)">
+                            <span   
+                                    v-if="metadataSection.id != undefined"
+                                    class="label-details"
+                                    :class="{ 'has-text-weight-bold': metadataSection.id === 'default_section' }">
                                 <span 
+                                        v-if="metadataSection.id === 'default_section'"
                                         v-tooltip="{
-                                            content: $i18n.get('edit'),
+                                            content: $i18n.get('label_required'),
                                             autoHide: true,
                                             popperClass: ['tainacan-tooltip', 'tooltip'],
                                             placement: 'auto-start'
-                                        }"
-                                        class="icon">
-                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                        }">
+                                    *&nbsp;({{ $i18n.get('label_default_section') }}) 
                                 </span>
-                            </a>
-                            <a 
-                                    v-if="metadataSection.current_user_can_delete"
-                                    :disabled="metadataSection.metadata_object_list.length"
-                                    :style="{ visibility: metadataSection.collection_id != collectionId || metadataSection.id === 'default_section' || metadataSection.metadata_object_list.length ? 'hidden' : 'visible' }"
-                                    @click.prevent="removeMetadataSection(metadataSection)">
-                                <span
+                                <span 
+                                        v-if="metadataSection.status === 'private'"
+                                        class="icon"
                                         v-tooltip="{
-                                            content: $i18n.get('delete'),
+                                            content: $i18n.get('status_private'),
                                             autoHide: true,
                                             popperClass: ['tainacan-tooltip', 'tooltip'],
                                             placement: 'auto-start'
-                                        }"
-                                        class="icon">
-                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                        }">
+                                    <i class="tainacan-icon tainacan-icon-private"/>
                                 </span>
-                            </a>
-                        </span>
-                    </div>
-                </div>
-
-                <section 
-                        v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
-                        class="field is-grouped-centered section">
-                    <div class="content has-text-gray has-text-centered">
-                        <p>
-                            <span class="icon is-large">
-                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
                             </span>
-                        </p>
-                        <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
-                        <p>{{ $i18n.get('info_create_metadata' ) }}</p>
+                            <span 
+                                    class="loading-spinner" 
+                                    v-if="metadataSection.id == undefined"/>
+                            <span 
+                                    class="controls" 
+                                    v-if="metadataSection.id !== undefined">
+                                <b-switch 
+                                        :disabled="isUpdatingMetadataSectionsOrder"
+                                        size="is-small" 
+                                        :model-value="metadataSection.enabled"
+                                        @update:model-value="onChangeEnableSection($event, sectionIndex)"/>
+                                <a 
+                                        v-if="metadataSection.current_user_can_edit"
+                                        :style="{ visibility: 
+                                                metadataSection.collection_id != collectionId
+                                                ? 'hidden' : 'visible'
+                                            }" 
+                                        @click.prevent="toggleMetadataSectionEdition(metadataSection)">
+                                    <span 
+                                            v-tooltip="{
+                                                content: $i18n.get('edit'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                placement: 'auto-start'
+                                            }"
+                                            class="icon">
+                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                    </span>
+                                </a>
+                                <a 
+                                        v-if="metadataSection.current_user_can_delete"
+                                        :disabled="metadataSection.metadata_object_list.length"
+                                        :style="{ visibility: metadataSection.collection_id != collectionId || metadataSection.id === 'default_section' || metadataSection.metadata_object_list.length ? 'hidden' : 'visible' }"
+                                        @click.prevent="removeMetadataSection(metadataSection)">
+                                    <span
+                                            v-tooltip="{
+                                                content: $i18n.get('delete'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                placement: 'auto-start'
+                                            }"
+                                            class="icon">
+                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                    </span>
+                                </a>
+                            </span>
+                        </div>
                     </div>
-                </section>
 
-                <b-loading v-model:active="isUpdatingMetadatum"/>
+                    <section 
+                            v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
+                            class="field is-grouped-centered section">
+                        <div class="content has-text-gray has-text-centered">
+                            <p>
+                                <span class="icon is-large">
+                                    <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                                </span>
+                            </p>
+                            <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
+                            <p>{{ $i18n.get('info_create_metadata' ) }}</p>
+                        </div>
+                    </section>
 
-                <!-- The Metadata list, inside each metadata section -->
-                <template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
-                    <draggable 
-                            v-model:value="metadataSection.metadata_object_list"
-                            class="active-metadata-area"
-                            @change="handleChange($event, sectionIndex)"
-                            :group="{ name:'metadata', pull: [ 'metadata' ], put: [ 'metadata' ] }"
-                            :sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
-                            :handle="'.handle'"
-                            ghost-class="sortable-ghost"
-                            chosen-class="sortable-chosen"
-                            filter=".not-sortable-item"
-                            :prevent-on-filter="false"
-                            :animation="250">
-                        <div    
-                                v-for="(metadatum, index) in metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0)"
-                                :key="metadatum.id"
-                                v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
-                            <div 
-                                    class="active-metadatum-item"
-                                    :class="{
-                                        'is-compact-item': !isCollapseOpen(metadatum.id),
-                                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied || isUpdatingMetadatum,
-                                        'not-focusable-item': openedMetadatumId == metadatum.id,
-                                        'disabled-metadatum': metadataSection.enabled == false || metadatum.enabled == false,
-                                        'inherited-metadatum': metadatum.inherited,
-                                        'child-metadatum': metadatum.parent > 0
-                                    }">
+                    <b-loading v-model="isUpdatingMetadatum"/>
+
+                    <!-- The Metadata list, inside each metadata section -->
+                    <template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
+                        <sortable 
+                                :list="metadataSection.metadata_object_list" 
+                                item-key="id"
+                                class="active-metadata-area"
+                                @update="handleChange($event, sectionIndex)"
+                                @add="handleChange($event, sectionIndex)"
+                                @remove="handleChange($event, sectionIndex)"
+                                :options="{
+                                    group: {
+                                        name:'metadata',
+                                        pull: [ 'metadata' ],
+                                        put: [ 'metadata' ]
+                                    },
+                                    sort: (openedMetadatumId == '' || openedMetadatumId == undefined) && (openedMetadataSectionId == '' || openedMetadataSectionId == undefined),
+                                    handle: '.handle',
+                                    ghostClass: 'sortable-ghost',
+                                    chosenClass: 'sortable-chosen',
+                                    filter: '.not-sortable-item',
+                                    preventOnFilter: false,
+                                    animation: 250
+                                }">
+                            <template #item="{ element: metadatum, index }">
                                 <div 
-                                        :ref="'metadatum-handler-' + metadatum.id"
-                                        class="handle">
-                                    <span class="sorting-buttons">
-                                        <button 
-                                                :disabled="index == 0"
-                                                class="link-button"
-                                                @click="moveMetadatumUpViaButton(index, sectionIndex)"
-                                                :aria-label="$i18n.get('label_move_up')">
-                                            <span class="icon">
-                                                <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
-                                            </span>
-                                        </button>
-                                        <button 
-                                                :disabled="index == metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0).length - 1"
-                                                class="link-button"
-                                                @click="moveMetadatumDownViaButton(index, sectionIndex)"
-                                                :aria-label="$i18n.get('label_move_down')">
-                                            <span class="icon">
-                                                <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
-                                            </span>
-                                        </button>
-                                    </span>
-                                    <span 
-                                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
-                                            v-tooltip="{
-                                                content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                placement: 'auto-start'
-                                            }"
-                                            class="icon grip-icon">
-                                        <svg 
-                                                xmlns="http://www.w3.org/2000/svg" 
-                                                height="24px"
-                                                viewBox="0 0 24 24"
-                                                width="24px"
-                                                fill="currentColor">
-                                            <path
-                                                    d="M0 0h24v24H0V0z"
-                                                    fill="transparent"/>
-                                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                                        </svg>
-                                    </span>
-                                    <span 
-                                            v-tooltip="{
-                                                content: $i18n.get('label_view_metadata_details'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                placement: 'auto-start'
-                                            }"
-                                            @click="Object.assign(collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
-                                            class="gray-icon icon"
-                                            :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
-                                        <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
-                                    </span>
+                                        v-if="metadatum != undefined && metadatum.parent == 0"
+                                        v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
+                                        class="active-metadatum-item"
+                                        :class="{
+                                            'is-compact-item': !isCollapseOpen(metadatum.id),
+                                            'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied || isUpdatingMetadatum,
+                                            'not-focusable-item': openedMetadatumId == metadatum.id,
+                                            'disabled-metadatum': metadataSection.enabled == false || metadatum.enabled == false,
+                                            'inherited-metadatum': metadatum.inherited,
+                                            'child-metadatum': metadatum.parent > 0
+                                        }">
+                                    <div 
+                                            :ref="'metadatum-handler-' + metadatum.id"
+                                            class="handle">
+                                        <span class="sorting-buttons">
+                                            <button 
+                                                    :disabled="index == 0"
+                                                    class="link-button"
+                                                    @click="moveMetadatumUpViaButton(index, sectionIndex)"
+                                                    :aria-label="$i18n.get('label_move_up')">
+                                                <span class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
+                                                </span>
+                                            </button>
+                                            <button 
+                                                    :disabled="index == metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0).length - 1"
+                                                    class="link-button"
+                                                    @click="moveMetadatumDownViaButton(index, sectionIndex)"
+                                                    :aria-label="$i18n.get('label_move_down')">
+                                                <span class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
+                                                </span>
+                                            </button>
+                                        </span>
+                                        <span 
+                                                :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
+                                                v-tooltip="{
+                                                    content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || isUpdatingMetadatum ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                    placement: 'auto-start'
+                                                }"
+                                                class="icon grip-icon">
+                                            <svg 
+                                                    xmlns="http://www.w3.org/2000/svg" 
+                                                    height="24px"
+                                                    viewBox="0 0 24 24"
+                                                    width="24px"
+                                                    fill="currentColor">
+                                                <path
+                                                        d="M0 0h24v24H0V0z"
+                                                        fill="transparent"/>
+                                                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                                            </svg>
+                                        </span>
+                                        <span 
+                                                v-tooltip="{
+                                                    content: $i18n.get('label_view_metadata_details'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                    placement: 'auto-start'
+                                                }"
+                                                @click="Object.assign(collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
+                                                class="gray-icon icon"
+                                                :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
+                                            <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                                        </span>
 
-                                    <span class="metadatum-name">
-                                            {{ metadatum.name }}
-                                    </span>
-                                    <span   
-                                            v-if="metadatum.id != undefined && metadatum.metadata_type_object"
-                                            class="label-details"
-                                            :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
-                                        <span 
-                                                v-if="metadatum.required === 'yes'"
-                                                v-tooltip="{
-                                                    content: $i18n.get('label_required'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                    placement: 'auto-start'
-                                                }">
-                                            *&nbsp;
+                                        <span class="metadatum-name">
+                                                {{ metadatum.name }}
                                         </span>
-                                        ({{ metadatum.metadata_type_object.name }}) 
-                                        <span 
-                                                v-if="metadatum.status === 'private'"
-                                                class="icon"
-                                                v-tooltip="{
-                                                    content: $i18n.get('status_private'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                    placement: 'auto-start'
-                                                }">
-                                            <i class="tainacan-icon tainacan-icon-private"/>
-                                        </span>
-                                        <span 
-                                                v-tooltip="{
-                                                    content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                    placement: 'auto-start'
-                                                }"
-                                                class="icon icon-level-identifier">
-                                            <i 
-                                                v-if="metadatum.collection_id == 'default'"
-                                                :class="{
-                                                    'has-text-blue5': metadatum.enabled,
-                                                    'has-text-gray3': !metadatum.enabled
-                                                }"
-                                                class="tainacan-icon tainacan-icon-repository" />
-                                            <i 
-                                                v-else
-                                                :class="{ 
-                                                    'has-text-turquoise5': metadatum.enabled, 
-                                                    'has-text-gray3': !metadatum.enabled
-                                                }"
-                                                class="tainacan-icon tainacan-icon-collection" />
-                                        </span>
-                                    </span>
-                                    <span 
-                                            class="loading-spinner" 
-                                            v-if="metadatum.id == undefined || isUpdatingMetadatum"/>
-                                    <span 
-                                            class="controls" 
-                                            v-if="metadatum.id !== undefined">
-                                        <b-switch 
-                                                :style="{ visibility: !metadataSection.enabled ? 'hidden' : 'visible' }"
-                                                :disabled="isUpdatingMetadataOrder || !metadataSection.enabled"
-                                                size="is-small" 
-                                                :value="metadatum.enabled"
-                                                @input="onChangeEnable($event, index, sectionIndex)"/>
-                                        <a 
-                                                v-if="metadatum.current_user_can_edit"
-                                                :style="{ visibility: 
-                                                        metadatum.collection_id != collectionId
-                                                        ? 'hidden' : 'visible'
-                                                    }" 
-                                                @click.prevent="toggleMetadatumEdition(metadatum)">
+                                        <span   
+                                                v-if="metadatum.id != undefined && metadatum.metadata_type_object"
+                                                class="label-details"
+                                                :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
+                                            <span 
+                                                    v-if="metadatum.required === 'yes'"
+                                                    v-tooltip="{
+                                                        content: $i18n.get('label_required'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                        placement: 'auto-start'
+                                                    }">
+                                                *&nbsp;
+                                            </span>
+                                            ({{ metadatum.metadata_type_object.name }}) 
+                                            <span 
+                                                    v-if="metadatum.status === 'private'"
+                                                    class="icon"
+                                                    v-tooltip="{
+                                                        content: $i18n.get('status_private'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                        placement: 'auto-start'
+                                                    }">
+                                                <i class="tainacan-icon tainacan-icon-private"/>
+                                            </span>
                                             <span 
                                                     v-tooltip="{
-                                                        content: $i18n.get('edit'),
+                                                        content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
                                                         autoHide: true,
                                                         popperClass: ['tainacan-tooltip', 'tooltip'],
                                                         placement: 'auto-start'
                                                     }"
-                                                    class="icon">
-                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                            </span>
-                                        </a>
-                                        <a 
-                                                v-if="metadatum.current_user_can_delete"
-                                                :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
-                                                @click.prevent="removeMetadatum(metadatum, sectionIndex)">
-                                            <span
-                                                    v-tooltip="{
-                                                        content: $i18n.get('delete'),
-                                                        autoHide: true,
-                                                        popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                        placement: 'auto-start'
+                                                    class="icon icon-level-identifier">
+                                                <i 
+                                                    v-if="metadatum.collection_id == 'default'"
+                                                    :class="{
+                                                        'has-text-blue5': metadatum.enabled,
+                                                        'has-text-gray3': !metadatum.enabled
                                                     }"
-                                                    class="icon">
-                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                                    class="tainacan-icon tainacan-icon-repository" />
+                                                <i 
+                                                    v-else
+                                                    :class="{ 
+                                                        'has-text-turquoise5': metadatum.enabled, 
+                                                        'has-text-gray3': !metadatum.enabled
+                                                    }"
+                                                    class="tainacan-icon tainacan-icon-collection" />
                                             </span>
-                                        </a>
-                                    </span>
+                                        </span>
+                                        <span 
+                                                class="loading-spinner" 
+                                                v-if="metadatum.id == undefined || isUpdatingMetadatum"/>
+                                        <span 
+                                                class="controls" 
+                                                v-if="metadatum.id !== undefined">
+                                            <b-switch 
+                                                    :style="{ visibility: !metadataSection.enabled ? 'hidden' : 'visible' }"
+                                                    :disabled="isUpdatingMetadataOrder || !metadataSection.enabled"
+                                                    size="is-small" 
+                                                    :model-value="metadatum.enabled"
+                                                    @update:model-value="onChangeEnable($event, index, sectionIndex)"/>
+                                            <a 
+                                                    v-if="metadatum.current_user_can_edit"
+                                                    :style="{ visibility: 
+                                                            metadatum.collection_id != collectionId
+                                                            ? 'hidden' : 'visible'
+                                                        }" 
+                                                    @click.prevent="toggleMetadatumEdition(metadatum)">
+                                                <span 
+                                                        v-tooltip="{
+                                                            content: $i18n.get('edit'),
+                                                            autoHide: true,
+                                                            popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                            placement: 'auto-start'
+                                                        }"
+                                                        class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                                </span>
+                                            </a>
+                                            <a 
+                                                    v-if="metadatum.current_user_can_delete"
+                                                    :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
+                                                    @click.prevent="removeMetadatum(metadatum, sectionIndex)">
+                                                <span
+                                                        v-tooltip="{
+                                                            content: $i18n.get('delete'),
+                                                            autoHide: true,
+                                                            popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                            placement: 'auto-start'
+                                                        }"
+                                                        class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                                </span>
+                                            </a>
+                                        </span>
+                                    </div>
+                                    <transition name="form-collapse">
+                                        <metadatum-details 
+                                                v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
+                                                :metadatum="metadatum" />
+                                    </transition>
                                 </div>
-                                <transition name="form-collapse">
-                                    <metadatum-details 
-                                            v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
-                                            :metadatum="metadatum" />
-                                </transition>
-                            </div>
-                            
-                            <!-- Child metadata list, inside each compound metadata -->
-                            <child-metadata-list
-                                    v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
-                                    :parent="metadatum"
-                                    :metadata-name-filter-string="metadataNameFilterString"
-                                    :metadata-type-filter-options="metadataTypeFilterOptions"
-                                    :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
-                                    :is-parent-multiple="metadatum.multiple == 'yes'"
-                                    :is-repository-level="false"
-                                    :collapse-all="collapseAll"
-                                    :section-id="metadataSection.id" />
-                            
-                            <!-- Metadata edition form, for each metadata -->
-                            <b-modal 
-                                    @close="onEditionCanceled()"
-                                    :active="openedMetadatumId == metadatum.id"
-                                    trap-focus
-                                    aria-modal
-                                    aria-role="dialog"
-                                    custom-class="tainacan-modal"
-                                    :close-button-aria-label="$i18n.get('close')">
-                                <metadatum-edition-form
-                                        :collection-id="collectionId"
-                                        :original-metadatum="metadatum"
+                                
+                                <!-- Child metadata list, inside each compound metadata -->
+                                <child-metadata-list
+                                        v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
+                                        :parent="metadatum"
+                                        :metadata-name-filter-string="metadataNameFilterString"
+                                        :metadata-type-filter-options="metadataTypeFilterOptions"
+                                        :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
+                                        :is-parent-multiple="metadatum.multiple == 'yes'"
                                         :is-repository-level="false"
-                                        @onEditionFinished="onEditionFinished()"
-                                        @onEditionCanceled="onEditionCanceled()"
-                                        :index="index" />
-                            </b-modal>
+                                        :collapse-all="collapseAll"
+                                        :section-id="metadataSection.id" />
+                                
+                                <!-- Metadata edition form, for each metadata -->
+                                <b-modal 
+                                        @close="onEditionCanceled()"
+                                        :model-value="openedMetadatumId == metadatum.id"
+                                        trap-focus
+                                        aria-modal
+                                        aria-role="dialog"
+                                        custom-class="tainacan-modal"
+                                        :close-button-aria-label="$i18n.get('close')">
+                                    <metadatum-edition-form
+                                            :collection-id="collectionId"
+                                            :original-metadatum="metadatum"
+                                            :is-repository-level="false"
+                                            @onEditionFinished="onEditionFinished()"
+                                            @onEditionCanceled="onEditionCanceled()"
+                                            :index="index" />
+                                </b-modal>
 
-                        </div>
-                    </draggable><!-- End of .active-metadata-area -->
-                </template>
-                
-                <!-- Metadata Section edition form, for each metadata section -->
-                <b-modal 
-                        @close="onSectionEditionCanceled()"
-                        :active="openedMetadataSectionId == metadataSection.id"
-                        trap-focus
-                        aria-modal
-                        aria-role="dialog"
-                        custom-class="tainacan-modal"
-                        :close-button-aria-label="$i18n.get('close')">
-                    <metadata-section-edition-form
-                            :collection-id="collectionId"
-                            :original-metadata-section="metadataSection"
-                            @onEditionFinished="onSectionEditionFinished()"
-                            @onEditionCanceled="onSectionEditionCanceled()"
-                            :index="sectionIndex" />
-                </b-modal>
+                            </template>
+                        </sortable><!-- End of .active-metadata-area -->
+                    </template>
+                    
+                    <!-- Metadata Section edition form, for each metadata section -->
+                    <b-modal 
+                            @close="onSectionEditionCanceled()"
+                            :model-value="openedMetadataSectionId == metadataSection.id"
+                            trap-focus
+                            aria-modal
+                            aria-role="dialog"
+                            custom-class="tainacan-modal"
+                            :close-button-aria-label="$i18n.get('close')">
+                        <metadata-section-edition-form
+                                :collection-id="collectionId"
+                                :original-metadata-section="metadataSection"
+                                @onEditionFinished="onSectionEditionFinished()"
+                                @onEditionCanceled="onSectionEditionCanceled()"
+                                :index="sectionIndex" />
+                    </b-modal>
 
-            </div>
-        </draggable> <!-- End of .active-metadata-sections-area -->
+                </div>
+            </template>
+        </sortable> <!-- End of .active-metadata-sections-area -->
     </div> <!-- End of .columns -->
 </template>
 
@@ -503,13 +521,16 @@ import ChildMetadataList from '../../components/metadata-types/compound/child-me
 import CustomDialog from '../../components/other/custom-dialog.vue';
 import { mapGetters, mapActions } from 'vuex';
 
+import { Sortable } from "sortablejs-vue3";
+
 export default {
     name: 'CollectionMetadataList',
     components: {
         MetadatumEditionForm,
         MetadataSectionEditionForm,
         ChildMetadataList,
-        MetadatumDetails
+        MetadatumDetails,
+        Sortable
     },
     props: {
         metadataTypeFilterOptions: Array
@@ -582,8 +603,8 @@ export default {
     mounted() {
         this.cleanMetadataSections();
         
-        this.$eventBusMetadataList.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton);
-        this.$eventBusMetadataList.$emitter.on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
+        this.$eventBusMetadataList.on('addMetadatumViaButton', this.addMetadatumViaButton);
+        this.$eventBusMetadataList.on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
 
         this.collectionId = this.$route.params.collectionId;
         this.isLoadingMetadataSections = true;
@@ -601,8 +622,8 @@ export default {
         if (this.metadataSearchCancel != undefined)
             this.metadataSearchCancel.cancel('Metadata search Canceled.');
         
-        this.$eventBusMetadataList.$emitter.off('addMetadatumViaButton', this.addMetadatumViaButton);
-        this.$eventBusMetadataList.$emitter.off('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
+        this.$eventBusMetadataList.off('addMetadatumViaButton', this.addMetadatumViaButton);
+        this.$eventBusMetadataList.off('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
     },
     methods: {
         ...mapActions('metadata', [
@@ -624,33 +645,60 @@ export default {
         ...mapGetters('metadata',[
             'getMetadataSections'
         ]),
-        handleSectionChange(event) {
-            if (event.added)
-                this.addNewMetadataSection(event.added.newIndex);
-            else if (event.removed)
-                this.removeMetadataSection(event.removed.element);
-            else if (event.moved)
-                this.updateMetadataSectionsOrder();
-        },
-        handleChange(event, sectionIndex) {
-            if (event.added) {
-                if (!event.added.element.id)
-                    this.addNewMetadatum(event.added.element, event.added.newIndex, sectionIndex);
-                else {
-                    this.updateMetadatum({
-                        collectionId: this.collectionId,
-                        metadatumId: event.added.element.id,
-                        isRepositoryLevel: event.added.element.collection_id === 'default',
-                        index: event.added.newIndex,
-                        options: {},
-                        includeOptionsAsHtml: true,
-                        sectionId: this.activeMetadataSectionsList[sectionIndex].id
-                    });
-                    this.updateMetadataSectionsOrder(sectionIndex);
+        handleSectionChange($event) {
+            switch ( $event.type ) {
+                case 'add':
+                    this.addNewMetadataSection($event.newIndex);
+                    break;
+                case 'remove':
+                    this.removeMetadataSection(this.activeFiltersList[$event.oldIndex]);
+                    break;
+                case 'update': {
+                    const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
+                    const element = newMetadataSectionsList.splice($event.oldIndex, 1)[0];
+                    newMetadataSectionsList.splice($event.newIndex, 0, element);                   
+
+                    this.updateMetadataSections(newMetadataSectionsList);
+
+                    this.updateMetadataSectionsOrder();
+
+                    break;
                 }
             }
-            else if (event.moved)
-                this.updateMetadataOrder(sectionIndex);
+        },
+        handleChange($event, sectionIndex) {
+            switch ( $event.type ) {
+                case 'add':
+                    if ( !this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex]['id'] )
+                        this.addNewMetadatum(this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex], $event.newIndex, sectionIndex);
+                    else {
+                        
+                        this.updateMetadatum({
+                            collectionId: this.collectionId,
+                            metadatumId: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].id,
+                            isRepositoryLevel: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].collection_id === 'default',
+                            index: $event.newIndex,
+                            options: {},
+                            includeOptionsAsHtml: true,
+                            sectionId: this.activeMetadataSectionsList[sectionIndex].id
+                        });
+
+                        const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
+                        const element = newSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
+                        newSectionMetadataObjectList.splice($event.newIndex, 0, element);
+
+                        const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
+                        newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
+                        this.updateMetadataSections(newMetadataSectionsList);
+
+                        this.updateMetadataSectionsOrder(sectionIndex);
+                    }
+
+                    break;
+                case 'update':
+                    this.updateMetadataOrder(sectionIndex);
+                    break;
+            }   
         },
         updateMetadataOrder(sectionIndex) {
             let metadataOrder = [];
diff --git a/src/views/admin/components/lists/collections-list.vue b/src/views/admin/components/lists/collections-list.vue
index 48b3b808f..be6778175 100644
--- a/src/views/admin/components/lists/collections-list.vue
+++ b/src/views/admin/components/lists/collections-list.vue
@@ -9,7 +9,7 @@
                 <span>
                     <b-checkbox 
                             @click="selectAllCollectionsOnPage()" 
-                            :value="allCollectionsOnPageSelected">{{ $i18n.get('label_select_all_collections_page') }}</b-checkbox>
+                            :model-value="allCollectionsOnPageSelected">{{ $i18n.get('label_select_all_collections_page') }}</b-checkbox>
                 </span>
             </div>
             <div class="field is-pulled-right">
@@ -19,15 +19,14 @@
                         id="bulk-actions-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button> 
-
+                    <template #trigger>
+                        <button class="button is-white">
+                            <span>{{ $i18n.get('label_bulk_actions') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button> 
+                    </template>
                     <b-dropdown-item
                             id="item-delete-selected-items"
                             @click="deleteSelectedCollections()"
@@ -143,7 +142,7 @@
                                 v-if="$userCaps.hasCapability('tnc_rep_delete_collections')"
                                 :class="{ 'is-selecting': isSelectingCollections }"
                                 class="checkbox-cell">
-                            <b-checkbox v-model:value="selectedCollections[index]"/> 
+                            <b-checkbox v-model="selectedCollections[index]"/> 
                         </td>
                         <!-- Status icon -->
                         <td 
diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index e7a7292ca..3aa1fd7db 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -11,7 +11,7 @@
                 <span>
                     <b-checkbox
                             @click.prevent="selectAllItemsOnPage()"
-                            :value="allItemsOnPageSelected">
+                            :model-value="allItemsOnPageSelected">
                         {{ $i18n.get('label_select_all_items_page') }}
                     </b-checkbox>
                 </span>
@@ -20,7 +20,7 @@
                         style="margin-left: 10px"
                         v-if="totalPages > 1 && allItemsOnPageSelected && Array.isArray(items) && items.length > 1">
                     <b-checkbox
-                            v-model:value="isAllItemsSelected">
+                            v-model="isAllItemsSelected">
                         {{ $i18n.getWithVariables('label_select_all_%s_items', [totalItems]) }}
                     </b-checkbox>
                 </span>
@@ -61,15 +61,14 @@
                         id="bulk-actions-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button>
-
+                    <template #trigger>
+                        <button class="button is-white">
+                            <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item
                             v-if="!isAllItemsSelected && selectedItems.length"
                             @click="filterBySelectedItems()"
@@ -183,15 +182,15 @@
                             class="grid-item-checkbox">
                         <b-checkbox
                                 v-if="!$adminOptions.itemsSingleSelectionMode"
-                                :value="getSelectedItemChecked(item.id)"
-                                @input="setSelectedItemChecked(item.id)">
+                                :model-value="getSelectedItemChecked(item.id)"
+                                @update:model-value="setSelectedItemChecked(item.id)">
                             <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                         </b-checkbox>
                         <b-radio
                                 v-else
                                 name="item-single-selection"
                                 :native-value="item.id"
-                                v-model:value="singleItemSelection"
+                                v-model="singleItemSelection"
                                 :aria-label="$i18n.get('label_select_item')">
                             <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                         </b-radio>
@@ -475,15 +474,15 @@
                             class="card-checkbox">
                         <b-checkbox
                                 v-if="!$adminOptions.itemsSingleSelectionMode"
-                                :value="getSelectedItemChecked(item.id)"
-                                @input="setSelectedItemChecked(item.id)">
+                                :model-value="getSelectedItemChecked(item.id)"
+                                @update:model-value="setSelectedItemChecked(item.id)">
                             <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                         </b-checkbox>
                         <b-radio
                                 v-else
                                 name="item-single-selection"
                                 :native-value="item.id"
-                                v-model:value="singleItemSelection">
+                                v-model="singleItemSelection">
                             <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                         </b-radio>
                     </div>
@@ -926,15 +925,15 @@
                                 class="checkbox-cell">
                             <b-checkbox
                                     v-if="!$adminOptions.itemsSingleSelectionMode"
-                                    :value="getSelectedItemChecked(item.id)"
-                                    @input="setSelectedItemChecked(item.id)">
+                                    :model-value="getSelectedItemChecked(item.id)"
+                                    @update:model-value="setSelectedItemChecked(item.id)">
                                 <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                             </b-checkbox>
                             <b-radio
                                     v-else
                                     name="item-single-selection"
                                     :native-value="item.id"
-                                    v-model:value="singleItemSelection">
+                                    v-model="singleItemSelection">
                                 <span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
                             </b-radio>
                         </td>
@@ -1588,7 +1587,7 @@
                                 <b-select
                                         :placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
                                         id="tainacan-select-geocoordinate-metatum"
-                                        v-model:value="selectedGeocoordinateMetadatumId">
+                                        v-model="selectedGeocoordinateMetadatumId">
                                     <option
                                             v-for="(geocoordinateMetadatum, geocoordinateMetadatumId) in geocoordinateMetadata"
                                             :key="geocoordinateMetadatum.id"
diff --git a/src/views/admin/components/lists/metadata-mapping-list.vue b/src/views/admin/components/lists/metadata-mapping-list.vue
index 46a2ca53d..e88fec68b 100644
--- a/src/views/admin/components/lists/metadata-mapping-list.vue
+++ b/src/views/admin/components/lists/metadata-mapping-list.vue
@@ -3,11 +3,11 @@
         <b-loading
                 :can-cancel="false"
                 :is-full-page="false"
-                v-model:active="isLoadingMetadatumMappers"/>
+                v-model="isLoadingMetadatumMappers"/>
         <b-loading
                 :can-cancel="false"
                 :is-full-page="false"
-                v-model:active="isLoadingMetadata"/>
+                v-model="isLoadingMetadata"/>
 
         <b-field>
             <p style="line-height: 2em;">{{ $i18n.get('info_metadata_mapper_helper') }}</p>
@@ -15,8 +15,8 @@
                     id="mappers-options-dropdown"
                     size="is-small"
                     :placeholder="$i18n.get('instruction_select_a_mapper')"
-                    :value="mapper"
-                    @input="onSelectMetadataMapper($event)">
+                    :model-value="mapper"
+                    @update:model-value="onSelectMetadataMapper($event)">
                 <option
                         v-for="metadatumMapper in metadatumMappers"
                         :key="metadatumMapper.slug"
@@ -79,8 +79,8 @@
                 
                 <b-select
                         :name="'mappers-metadatum-select-' + mapperMetadatum.slug"
-                        v-model:value="mapperMetadatum.selected"
-                        @input="onSelectMetadatumForMapperMetadata">
+                        v-model="mapperMetadatum.selected"
+                        @update:model-value="onSelectMetadatumForMapperMetadata">
                     <option
                             value="">
                         {{ $i18n.get('instruction_select_a_metadatum') }}
@@ -154,7 +154,7 @@
 
         <b-modal
                 @close="onCancelNewMetadataMapperMetadata"
-                v-model:active="isMapperMetadataCreating"
+                v-model="isMapperMetadataCreating"
                 trap-focus
                 aria-modal
                 aria-role="dialog"
@@ -172,7 +172,7 @@
                 </div>
                 <b-field>
                     <b-input
-                            v-model:value="newMetadataLabel"
+                            v-model="newMetadataLabel"
                             required
                             :placeholder="$i18n.get('label_name')"/>
                 </b-field>
@@ -181,7 +181,7 @@
                             placeholder="URI"
                             type="url"
                             required
-                            v-model:value="newMetadataUri"/>
+                            v-model="newMetadataUri"/>
                 </b-field>
                 <div class="field is-grouped form-submit">
                     <div class="control">
diff --git a/src/views/admin/components/lists/metadata-types-list.vue b/src/views/admin/components/lists/metadata-types-list.vue
index adb6aa75e..ab302f096 100644
--- a/src/views/admin/components/lists/metadata-types-list.vue
+++ b/src/views/admin/components/lists/metadata-types-list.vue
@@ -3,127 +3,147 @@
             v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel"
             class="column available-metadata-types-area" >
 
-        <b-loading v-model:active="isLoadingMetadataTypes"/>
+        <b-loading v-model="isLoadingMetadataTypes"/>
 
         <div class="field">
             <h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3>
-            <draggable 
-                    v-model:value="availableMetadatumList"
-                    :sort="false" 
-                    :group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }"
-                    drag-class="sortable-drag">
-                <div 
-                        :id="metadatum.component"
-                        @click.prevent.once="addMetadatumViaButton(metadatum)"
-                        class="available-metadatum-item"
-                        :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
-                        v-for="(metadatum, index) in availableMetadatumList"
-                        :key="index">
-                    <span
-                            v-tooltip="{
-                                content: $i18n.get('instruction_click_or_drag_metadatum_create'),
-                                autoHide: true,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }"   
-                            class="icon grip-icon">
-                        <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
-                        <svg 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                height="24px"
-                                viewBox="0 0 24 24"
-                                width="24px"
-                                fill="currentColor">
-                            <path
-                                    d="M0 0h24v24H0V0z"
-                                    fill="transparent"/>
-                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                        </svg>
-                    </span>
-                    <span class="metadatum-name">
-                        {{ metadatum.name }}
-                        <span 
+            <sortable 
+                    :list="availableMetadatumList"
+                    item-key="id"
+                    :options="{
+                        group: {
+                            name: 'metadata',
+                            pull: 'clone',
+                            put: false,
+                            revertClone: true
+                        },
+                        sort: false,
+                        dragClass: 'sortable-drag'
+                    }">
+                <template #item="{ element: metadatum }">
+                    <div 
+                            :id="metadatum.component"
+                            @click.prevent.once="addMetadatumViaButton(metadatum)"
+                            class="available-metadatum-item"
+                            :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }">
+                        <span
                                 v-tooltip="{
-                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
-                                    content: getPreviewTemplateContent(metadatum),
-                                    html: true,
-                                    delay: {
-                                        shown: 0,
-                                        hide: 100,
-                                    },
-                                    placement: 'top',
-                                }"
-                                class="icon preview-help-icon has-text-secondary">
-                            <i class="tainacan-icon tainacan-icon-help"/>
+                                    content: $i18n.get('instruction_click_or_drag_metadatum_create'),
+                                    autoHide: true,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }"   
+                                class="icon grip-icon">
+                            <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
+                            <svg 
+                                    xmlns="http://www.w3.org/2000/svg" 
+                                    height="24px"
+                                    viewBox="0 0 24 24"
+                                    width="24px"
+                                    fill="currentColor">
+                                <path
+                                        d="M0 0h24v24H0V0z"
+                                        fill="transparent"/>
+                                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                            </svg>
                         </span>
-                    </span>
-                    <span 
-                            class="loading-spinner" 
-                            v-if="highlightedMetadatum == metadatum.name"/>
-                </div>
-            </draggable>
+                        <span class="metadatum-name">
+                            {{ metadatum.name }}
+                            <span 
+                                    v-tooltip="{
+                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
+                                        content: getPreviewTemplateContent(metadatum),
+                                        html: true,
+                                        delay: {
+                                            shown: 0,
+                                            hide: 100,
+                                        },
+                                        placement: 'top',
+                                    }"
+                                    class="icon preview-help-icon has-text-secondary">
+                                <i class="tainacan-icon tainacan-icon-help"/>
+                            </span>
+                        </span>
+                        <span 
+                                class="loading-spinner" 
+                                v-if="highlightedMetadatum == metadatum.name"/>
+                    </div>
+                </template>
+            </sortable>
 
-            <draggable
+            <sortable
                     v-if="!isRepositoryLevel" 
-                    v-model:value="availableMetadataSectionsList"
-                    :sort="false" 
-                    :group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }"
-                    drag-class="sortable-drag">
-                <div 
-                        :id="metadataSection.id"
-                        @click.prevent="addMetadataSectionViaButton()"
-                        class="available-metadata-section-item"
-                        v-for="(metadataSection, index) in availableMetadataSectionsList"
-                        :key="index">
-                    <span
-                            v-tooltip="{
-                                content: $i18n.get('instruction_click_or_drag_metadatum_create'),
-                                autoHide: true,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }"   
-                            class="icon grip-icon">
-                        <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
-                        <svg 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                height="24px"
-                                viewBox="0 0 24 24"
-                                width="24px"
-                                fill="currentColor">
-                            <path
-                                    d="M0 0h24v24H0V0z"
-                                    fill="transparent"/>
-                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                        </svg>
-                    </span>
-                    <span class="metadatum-name">
-                        {{ metadataSection.label }}
-                        <span 
+                    :list="availableMetadataSectionsList"
+                    item-key="id"
+                    :options="{
+                        group: {
+                            name: 'metadata-sections',
+                            pull: 'clone',
+                            put: false,
+                            revertClone: true
+                        },
+                        sort: false,
+                        dragClass: 'sortable-drag'
+                    }">
+                <template #item="{ element: metadataSection }">
+                    <div 
+                            :id="metadataSection.id"
+                            @click.prevent="addMetadataSectionViaButton()"
+                            class="available-metadata-section-item">
+                        <span
                                 v-tooltip="{
-                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
-                                    content: $i18n.get('info_create_section'),
-                                    html: true,
-                                    delay: {
-                                        shown: 0,
-                                        hide: 100,
-                                    },
-                                    placement: 'top',
-                                }"
-                                class="icon preview-help-icon has-text-secondary">
-                            <i class="tainacan-icon tainacan-icon-help"/>
+                                    content: $i18n.get('instruction_click_or_drag_metadatum_create'),
+                                    autoHide: true,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }"   
+                                class="icon grip-icon">
+                            <!-- <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/> -->
+                            <svg 
+                                    xmlns="http://www.w3.org/2000/svg" 
+                                    height="24px"
+                                    viewBox="0 0 24 24"
+                                    width="24px"
+                                    fill="currentColor">
+                                <path
+                                        d="M0 0h24v24H0V0z"
+                                        fill="transparent"/>
+                                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                            </svg>
                         </span>
-                    </span>
-                </div>
-            </draggable>
+                        <span class="metadatum-name">
+                            {{ metadataSection.label }}
+                            <span 
+                                    v-tooltip="{
+                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '', 'metadata-type-preview-tooltip'],
+                                        content: $i18n.get('info_create_section'),
+                                        html: true,
+                                        delay: {
+                                            shown: 0,
+                                            hide: 100,
+                                        },
+                                        placement: 'top',
+                                    }"
+                                    class="icon preview-help-icon has-text-secondary">
+                                <i class="tainacan-icon tainacan-icon-help"/>
+                            </span>
+                        </span>
+                    </div>
+                </template>
+            </sortable>
         </div>
     </div> 
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import { Sortable } from "sortablejs-vue3";
 
 export default {
     name: 'MetadataTypesList',
+    components: {
+        Sortable
+    },
     props: {
         isRepositoryLevel: Boolean,
         highlightedMetadatum: String
@@ -172,10 +192,10 @@ export default {
             'getMetadatumTypes'
         ]),
         addMetadatumViaButton(metadatumType) {
-            this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType);
+            this.$eventBusMetadataList.emit('addMetadatumViaButton', metadatumType);
         },
         addMetadataSectionViaButton() {
-            this.$eventBusMetadataList.onAddMetadataSectionViaButton();
+            this.$eventBusMetadataList.emit('addMetadataSectionViaButton');
         },
         getPreviewTemplateContent(metadatum) {
             return `<div class="metadata-type-preview tainacan-form">
@@ -242,6 +262,7 @@ export default {
             .grip-icon { 
                 color: var(--tainacan-gray3);
                 position: relative;
+                flex-shrink: 0;
             }
             .icon {
                 position: relative;
diff --git a/src/views/admin/components/lists/processes-list.vue b/src/views/admin/components/lists/processes-list.vue
index 141073842..8a1b0ec63 100644
--- a/src/views/admin/components/lists/processes-list.vue
+++ b/src/views/admin/components/lists/processes-list.vue
@@ -10,7 +10,7 @@
                       <span>
                           <b-checkbox
                                   @click="selectAllOnPage()"
-                                  :value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox>
+                                  :model-value="allOnPageSelected">{{ $i18n.get('label_select_all_processes_page') }}</b-checkbox>
                       </span>
                   </div>
                   <div class="field is-pulled-right">
@@ -19,15 +19,14 @@
                               :disabled="!isSelecting"
                               id="bulk-actions-dropdown"
                               trap-focus>
-                          <button
-                                  class="button is-white"
-                                  slot="trigger">
-                              <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                              <span class="icon">
-                                  <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                              </span>
-                          </button>
-
+                            <template #trigger>
+                                <button class="button is-white">
+                                    <span>{{ $i18n.get('label_bulk_actions') }}</span>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                                    </span>
+                                </button>
+                            </template>
                           <b-dropdown-item
                                   id="item-delete-selected-items"
                                   @click="deleteSelected()">
@@ -64,7 +63,7 @@
                     :class="{ 'is-selecting': isSelecting }"
                     class="checkbox-cell">
                 <b-checkbox
-                        v-model:value="selected[index]"/>
+                        v-model="selected[index]"/>
             </span> -->
             <!-- Name -->
             <span
diff --git a/src/views/admin/components/lists/related-items-list.vue b/src/views/admin/components/lists/related-items-list.vue
index f1a56aeb4..4863f95c2 100644
--- a/src/views/admin/components/lists/related-items-list.vue
+++ b/src/views/admin/components/lists/related-items-list.vue
@@ -3,7 +3,7 @@
         <div class="table-container">
             <b-loading
                     is-full-page="false" 
-                    v-model:active="displayLoading" />
+                    v-model="displayLoading" />
             <div class="table-wrapper">
                 <div class="related-items-list">
                     <div 
@@ -137,7 +137,7 @@
                 </div>
                 <b-modal 
                         :width="1200"
-                        v-model:active="editItemModal"
+                        v-model="editItemModal"
                         @after-leave="reloadRelatedItems"
                         custom-class="tainacan-modal"
                         :close-button-aria-label="$i18n.get('close')">
diff --git a/src/views/admin/components/lists/repository-metadata-list.vue b/src/views/admin/components/lists/repository-metadata-list.vue
index bb23c5f2c..d7bdd25b6 100644
--- a/src/views/admin/components/lists/repository-metadata-list.vue
+++ b/src/views/admin/components/lists/repository-metadata-list.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="column">
                            
-        <b-loading v-model:active="isLoadingMetadata"/>
+        <b-loading v-model="isLoadingMetadata"/>
 
         <div class="tainacan-form sub-header">
             <!-- <h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3> -->
@@ -29,15 +29,16 @@
                             class="show metadata-options-dropdown"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_filter_by_metadata_type')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_filter_by_metadata_type')"
+                                    class="button is-white">
+                                <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                                </span>
+                            </button>
+                        </template>
                         <div class="metadata-options-container">
                             <b-dropdown-item
                                     v-for="(metadataType, index) in metadataTypeFilterOptions"
@@ -46,7 +47,7 @@
                                     custom
                                     aria-role="listitem">
                                 <b-checkbox
-                                        v-model:value="metadataType.enabled"
+                                        v-model="metadataType.enabled"
                                         :native-value="metadataType.enabled">
                                     {{ metadataType.name }}
                                 </b-checkbox>
@@ -57,7 +58,7 @@
                 <b-field class="header-item">
                     <b-input 
                             :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
-                            v-model:value="metadataNameFilterString"
+                            v-model="metadataNameFilterString"
                             icon="magnify"
                             size="is-small"
                             icon-right="close-circle"
@@ -83,211 +84,217 @@
         
         <!-- The Repository Metadata list -->
         <div class="active-metadata-sections-area">
-            <draggable 
-                    v-model:value="activeMetadatumList"
+            <sortable
+                    :list="activeMetadatumList"
+                    item-key="id"
                     class="active-metadata-area"
-                    @change="handleChange($event)"
-                    :group="{ name:'metadata', pull: false, put: true }"
-                    :sort="false"
-                    :handle="'.handle'"
-                    ghost-class="sortable-ghost"
-                    chosen-class="sortable-chosen"
-                    filter=".not-sortable-item"
-                    :prevent-on-filter="false"
-                    :animation="250">
-                <div    
-                        v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
-                        :key="metadatum.id"
-                        v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
-                    <div 
-                            class="active-metadatum-item"
-                            :class="{
-                                'is-compact-item': !isCollapseOpen(metadatum.id),
-                                'not-sortable-item': true,
-                                'not-focusable-item': openedMetadatumId == metadatum.id,
-                                'disabled-metadatum': metadatum.enabled == false,
-                                'inherited-metadatum': true,
-                                'child-metadatum': metadatum.parent > 0
-                            }">
+                    @add="handleChange($event)"
+                    @remove="handleChange($event)"
+                    :options="{
+                        group: { name:'metadata', pull: false, put: true },
+                        handle: '.handle',
+                        ghostClass: 'sortable-ghost',
+                        chosenClass: 'sortable-chosen',
+                        filter: '.not-sortable-item',
+                        preventOnFilter: false,
+                        animation: 250
+                    }">
+                <template #item="{ element: metadatum, index }">
+                    <div    
+                            v-if="metadatum != undefined && metadatum.parent == 0"
+                            v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
                         <div 
-                                :ref="'metadatum-handler-' + metadatum.id"
-                                class="handle">
-                            <span 
-                                    :style="{ opacity: '0.0' }"
-                                    v-tooltip="{
-                                        content: $i18n.get('info_not_allowed_change_order_metadata'),
-                                        autoHide: true,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                        placement: 'auto-start'
-                                    }"
-                                    class="icon grip-icon">
-                                <svg 
-                                        xmlns="http://www.w3.org/2000/svg" 
-                                        height="24px"
-                                        viewBox="0 0 24 24"
-                                        width="24px"
-                                        fill="currentColor">
-                                    <path
-                                            d="M0 0h24v24H0V0z"
-                                            fill="transparent"/>
-                                    <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                                </svg>
-                            </span>
-                            <span 
-                                    v-tooltip="{
-                                        content: $i18n.get('label_view_metadata_details'),
-                                        autoHide: true,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                        placement: 'auto-start'
-                                    }"
-                                    @click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
-                                    class="gray-icon icon"
-                                    :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
-                                <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
-                            </span>
+                                class="active-metadatum-item"
+                                :class="{
+                                    'is-compact-item': !isCollapseOpen(metadatum.id),
+                                    'not-sortable-item': true,
+                                    'not-focusable-item': openedMetadatumId == metadatum.id,
+                                    'disabled-metadatum': metadatum.enabled == false,
+                                    'inherited-metadatum': true,
+                                    'child-metadatum': metadatum.parent > 0
+                                }">
+                            <div 
+                                    :ref="'metadatum-handler-' + metadatum.id"
+                                    class="handle">
+                                <span 
+                                        :style="{ opacity: '0.0' }"
+                                        v-tooltip="{
+                                            content: $i18n.get('info_not_allowed_change_order_metadata'),
+                                            autoHide: true,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                            placement: 'auto-start'
+                                        }"
+                                        class="icon grip-icon">
+                                    <svg 
+                                            xmlns="http://www.w3.org/2000/svg" 
+                                            height="24px"
+                                            viewBox="0 0 24 24"
+                                            width="24px"
+                                            fill="currentColor">
+                                        <path
+                                                d="M0 0h24v24H0V0z"
+                                                fill="transparent"/>
+                                        <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                                    </svg>
+                                </span>
+                                <span 
+                                        v-tooltip="{
+                                            content: $i18n.get('label_view_metadata_details'),
+                                            autoHide: true,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                            placement: 'auto-start'
+                                        }"
+                                        @click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
+                                        class="gray-icon icon"
+                                        :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
+                                    <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                                </span>
 
-                            <span class="metadatum-name">
-                                    {{ metadatum.name }}
-                            </span>
-                            <span   
-                                    v-if="metadatum.id != undefined && metadatum.metadata_type_object"
-                                    class="label-details"
-                                    :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
-                                <span 
-                                        v-if="metadatum.required === 'yes'"
-                                        v-tooltip="{
-                                            content: $i18n.get('label_required'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                            placement: 'auto-start'
-                                        }">
-                                    *&nbsp;
+                                <span class="metadatum-name">
+                                        {{ metadatum.name }}
                                 </span>
-                                ({{ metadatum.metadata_type_object.name }}) 
-                                <span 
-                                        v-if="metadatum.status === 'private'"
-                                        class="icon"
-                                        v-tooltip="{
-                                            content: $i18n.get('status_private'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                            placement: 'auto-start'
-                                        }">
-                                    <i class="tainacan-icon tainacan-icon-private"/>
-                                </span>
-                                <span 
-                                        v-tooltip="{
-                                            content: $i18n.get('label_repository_metadatum'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                            placement: 'auto-start'
-                                        }"
-                                        class="icon icon-level-identifier">
-                                    <i 
-                                        :class="{
-                                            'has-text-blue5': metadatum.enabled,
-                                            'has-text-gray3': !metadatum.enabled
-                                        }"
-                                        class="tainacan-icon tainacan-icon-repository" />
-                                </span>
-                            </span>
-                            <span 
-                                    class="loading-spinner" 
-                                    v-if="metadatum.id == undefined"/>
-                            <span 
-                                    class="controls" 
-                                    v-if="metadatum.id !== undefined">
-                                <a 
-                                        v-if="metadatum.current_user_can_edit"
-                                        :style="{ visibility: 
-                                                metadatum.collection_id != collectionId
-                                                ? 'hidden' : 'visible'
-                                            }" 
-                                        @click.prevent="toggleMetadatumEdition(metadatum)">
+                                <span   
+                                        v-if="metadatum.id != undefined && metadatum.metadata_type_object"
+                                        class="label-details"
+                                        :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
+                                    <span 
+                                            v-if="metadatum.required === 'yes'"
+                                            v-tooltip="{
+                                                content: $i18n.get('label_required'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                                placement: 'auto-start'
+                                            }">
+                                        *&nbsp;
+                                    </span>
+                                    ({{ metadatum.metadata_type_object.name }}) 
+                                    <span 
+                                            v-if="metadatum.status === 'private'"
+                                            class="icon"
+                                            v-tooltip="{
+                                                content: $i18n.get('status_private'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                                placement: 'auto-start'
+                                            }">
+                                        <i class="tainacan-icon tainacan-icon-private"/>
+                                    </span>
                                     <span 
                                             v-tooltip="{
-                                                content: $i18n.get('edit'),
+                                                content: $i18n.get('label_repository_metadatum'),
                                                 autoHide: true,
                                                 popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                                 placement: 'auto-start'
                                             }"
-                                            class="icon">
-                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                    </span>
-                                </a>
-                                <a 
-                                        v-if="metadatum.current_user_can_delete"
-                                        :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
-                                        @click.prevent="removeMetadatum(metadatum)">
-                                    <span
-                                            v-tooltip="{
-                                                content: $i18n.get('delete'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                                placement: 'auto-start'
+                                            class="icon icon-level-identifier">
+                                        <i 
+                                            :class="{
+                                                'has-text-blue5': metadatum.enabled,
+                                                'has-text-gray3': !metadatum.enabled
                                             }"
-                                            class="icon">
-                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                            class="tainacan-icon tainacan-icon-repository" />
                                     </span>
-                                </a>
-                            </span>
+                                </span>
+                                <span 
+                                        class="loading-spinner" 
+                                        v-if="metadatum.id == undefined"/>
+                                <span 
+                                        class="controls" 
+                                        v-if="metadatum.id !== undefined">
+                                    <a 
+                                            v-if="metadatum.current_user_can_edit"
+                                            :style="{ visibility: 
+                                                    metadatum.collection_id != collectionId
+                                                    ? 'hidden' : 'visible'
+                                                }" 
+                                            @click.prevent="toggleMetadatumEdition(metadatum)">
+                                        <span 
+                                                v-tooltip="{
+                                                    content: $i18n.get('edit'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                                    placement: 'auto-start'
+                                                }"
+                                                class="icon">
+                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                        </span>
+                                    </a>
+                                    <a 
+                                            v-if="metadatum.current_user_can_delete"
+                                            :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
+                                            @click.prevent="removeMetadatum(metadatum)">
+                                        <span
+                                                v-tooltip="{
+                                                    content: $i18n.get('delete'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
+                                                    placement: 'auto-start'
+                                                }"
+                                                class="icon">
+                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                        </span>
+                                    </a>
+                                </span>
+                            </div>
+                            <transition name="form-collapse">
+                                <metadatum-details 
+                                        v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
+                                        :metadatum="metadatum" />
+                            </transition>
                         </div>
-                        <transition name="form-collapse">
-                            <metadatum-details 
-                                    v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
-                                    :metadatum="metadatum" />
-                        </transition>
-                    </div>
-                    
-                    <!-- Child metadata list, inside each compound metadata -->
-                    <child-metadata-list
-                            v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
-                            :parent="metadatum"
-                            :metadata-name-filter-string="metadataNameFilterString"
-                            :metadata-type-filter-options="metadataTypeFilterOptions"
-                            :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
-                            :is-parent-multiple="metadatum.multiple == 'yes'"
-                            :is-repository-level="true"
-                            :collapse-all="collapseAll" />
-                    
-                    <!-- Metadata edition form, for each metadata -->
-                    <b-modal 
-                            @close="onEditionCanceled()"
-                            :active="openedMetadatumId == metadatum.id"
-                            trap-focus
-                            aria-modal
-                            aria-role="dialog"
-                            custom-class="tainacan-modal"
-                            :close-button-aria-label="$i18n.get('close')">
-                        <metadatum-edition-form
-                                :collection-id="collectionId"
-                                :original-metadatum="metadatum"
+                        
+                        <!-- Child metadata list, inside each compound metadata -->
+                        <child-metadata-list
+                                v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
+                                :parent="metadatum"
+                                :metadata-name-filter-string="metadataNameFilterString"
+                                :metadata-type-filter-options="metadataTypeFilterOptions"
+                                :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
+                                :is-parent-multiple="metadatum.multiple == 'yes'"
                                 :is-repository-level="true"
-                                @onEditionFinished="onEditionFinished()"
-                                @onEditionCanceled="onEditionCanceled()"
-                                :index="index" />
-                    </b-modal>
+                                :collapse-all="collapseAll" />
+                        
+                        <!-- Metadata edition form, for each metadata -->
+                        <b-modal 
+                                @close="onEditionCanceled()"
+                                :model-value="openedMetadatumId == metadatum.id"
+                                trap-focus
+                                aria-modal
+                                aria-role="dialog"
+                                custom-class="tainacan-modal"
+                                :close-button-aria-label="$i18n.get('close')">
+                            <metadatum-edition-form
+                                    :collection-id="collectionId"
+                                    :original-metadatum="metadatum"
+                                    :is-repository-level="true"
+                                    @onEditionFinished="onEditionFinished()"
+                                    @onEditionCanceled="onEditionCanceled()"
+                                    :index="index" />
+                        </b-modal>
 
-                </div>
-            </draggable><!-- End of .active-metadata-area -->
+                    </div>
+                </template>
+            </sortable><!-- End of .active-metadata-area -->
         </div>
     </div> <!-- End of .columns -->
 </template>
 
 <script>
-
 import MetadatumEditionForm from '../edition/metadatum-edition-form.vue';
 import MetadatumDetails from '../other/metadatum-details.vue';
 import ChildMetadataList from '../metadata-types/compound/child-metadata-list.vue';
 import CustomDialog from '../other/custom-dialog.vue';
 import { mapGetters, mapActions } from 'vuex';
 
+import { Sortable } from 'sortablejs-vue3';
+
 export default {
     name: 'RepositoryMetadataList',
     components: {
         MetadatumEditionForm,
         ChildMetadataList,
-        MetadatumDetails
+        MetadatumDetails,
+        Sortable
     },
     props: {
         metadataTypeFilterOptions: Array
@@ -339,7 +346,7 @@ export default {
     mounted() {
         this.cleanMetadata();
         this.loadMetadata();
-        this.$eventBusMetadataList.$emitter.on('addMetadatumViaButton', this.addMetadatumViaButton);
+        this.$eventBusMetadataList.on('addMetadatumViaButton', this.addMetadatumViaButton);
     },
     beforeUnmount() {
         // Cancels previous Request
@@ -357,11 +364,15 @@ export default {
         ...mapGetters('metadata',[
             'getMetadata'
         ]),
-        handleChange(event) {
-            if (event.added)
-                this.addNewMetadatum(event.added.element, event.added.newIndex);
-            else if (event.removed)
-                this.removeMetadatum(event.removed.element);
+        handleChange($event) {
+            switch ($event.type) {
+                case 'add':
+                    this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
+                    break;
+                case 'remove':
+                    this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);
+                    break;
+            }
         },
         addMetadatumViaButton(metadatumType) {
             let lastIndex = this.activeMetadatumList.length;
diff --git a/src/views/admin/components/lists/taxonomies-list.vue b/src/views/admin/components/lists/taxonomies-list.vue
index a722dcc1f..70e341625 100644
--- a/src/views/admin/components/lists/taxonomies-list.vue
+++ b/src/views/admin/components/lists/taxonomies-list.vue
@@ -10,7 +10,7 @@
                 <span>
                     <b-checkbox 
                             @click="selectAllOnPage()" 
-                            :value="allOnPageSelected">{{ $i18n.get('label_select_all_taxonomies_page') }}</b-checkbox>
+                            :model-value="allOnPageSelected">{{ $i18n.get('label_select_all_taxonomies_page') }}</b-checkbox>
                 </span>
             </div>
             <div class="field is-pulled-right">
@@ -20,15 +20,14 @@
                         id="bulk-actions-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ $i18n.get('label_bulk_actions') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button> 
-
+                    <template #trigger>
+                        <button class="button is-white">
+                            <span>{{ $i18n.get('label_bulk_actions') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button> 
+                    </template>
                     <b-dropdown-item
                             id="item-delete-selected-items"
                             @click="deleteSelected()"
@@ -92,7 +91,7 @@
                                 :class="{ 'is-selecting': isSelecting }"
                                 class="checkbox-cell">
                             <b-checkbox 
-                                    v-model:value="selected[index]"/> 
+                                    v-model="selected[index]"/> 
                         </td>
                         <!-- Status icon -->
                         <td 
diff --git a/src/views/admin/components/lists/terms-list-hierarchical.vue b/src/views/admin/components/lists/terms-list-hierarchical.vue
index 74cf3da3b..0fae2e32d 100644
--- a/src/views/admin/components/lists/terms-list-hierarchical.vue
+++ b/src/views/admin/components/lists/terms-list-hierarchical.vue
@@ -3,7 +3,7 @@
 
         <b-loading
                 :is-full-page="false"
-                v-model:active="isColumnLoading"/>
+                v-model="isColumnLoading"/>
 
         <transition name="appear-from-top">
             <button
@@ -243,7 +243,7 @@
         </section>
 
         <b-modal
-                v-model:value="isEditingTerm"
+                v-model="isEditingTerm"
                 :width="768"
                 trap-focus
                 aria-role="dialog"
diff --git a/src/views/admin/components/lists/terms-list.vue b/src/views/admin/components/lists/terms-list.vue
index e37237b8d..0c0c977be 100644
--- a/src/views/admin/components/lists/terms-list.vue
+++ b/src/views/admin/components/lists/terms-list.vue
@@ -10,7 +10,7 @@
                         autocomplete="on"
                         :placeholder="$i18n.get('instruction_search')"
                         :aria-name="$i18n.get('instruction_search')"
-                        v-model:value="searchString"
+                        v-model="searchString"
                         icon-right="magnify"
                         type="search" />
             </b-field>
@@ -37,15 +37,16 @@
                         aria-role="list"
                         trap-focus
                         position="is-bottom-left">
-                    <button
-                            type="button"
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                type="button"
+                                class="button is-white">
+                            <span>{{ selected.length == 1 ? $i18n.get('label_one_selected_term') : $i18n.getWithVariables('label_%s_selected_terms', [ selected.length ]) }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item
                             custom
                             v-for="term of selected"
@@ -78,15 +79,16 @@
                         id="bulk-actions-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            type="button"
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                type="button"
+                                class="button is-white">
+                            <span>{{ $i18n.get('label_actions_for_the_selection') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item
                             @click="$emit('deleteSelectedTerms')"
                             id="item-delete-selected-terms"
diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index 4c499d2a6..988e643ea 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -15,215 +15,222 @@
                 <p>{{ $i18n.get('info_create_child_metadata') }}</p>
             </div>
         </section>
-        <draggable
-                v-model:value="childrenMetadata"
+        <sortable
+                :list="childrenMetadata"
                 :style="{ minHeight: childrenMetadata.length > 0 ? '40px' : '70px' }"
                 class="active-metadata-area child-metadata-area"
+                item-key="id"
                 @change="handleChange"
-                :group="{ name:'metadata', pull: false, put: isAvailableChildMetadata }"
-                :sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
-                :handle="'.handle'"
-                ghost-class="sortable-ghost"
-                chosen-class="sortable-chosen"
-                filter=".not-sortable-item"
-                :prevent-on-filter="false"
-                :animation="250"> 
-            <div 
-                    class="active-metadatum-item"
-                    :class="{
-                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
-                        'not-focusable-item': openedMetadatumId == metadatum.id,
-                        'disabled-metadatum': parent.enabled == false,
-                        'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
-                    }" 
-                    v-for="(metadatum, index) in childrenMetadata"
-                    :key="metadatum.id"
-                    v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
+                :options="{
+                    group: {
+                        name: 'metadata',
+                        pull: false,
+                        put: isAvailableChildMetadata
+                    },
+                    sort: (openedMetadatumId == '' || openedMetadatumId == undefined),
+                    handle: '.handle',
+                    ghostClass: 'sortable-ghost',
+                    chosenClass: 'sortable-chosen',
+                    filter: '.not-sortable-item',
+                    preventOnFilter: false,
+                    animation: 250
+                }"> 
+            <template #item="{ element: metadatum, index }">
                 <div 
-                        :ref="'metadatum-handler-' + metadatum.id"
-                        class="handle">
-                    <span class="sorting-buttons">
-                        <button 
-                                :disabled="index == 0"
-                                class="link-button"
-                                @click="moveMetadatumUpViaButton(index)"
-                                :aria-label="$i18n.get('label_move_up')">
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
-                            </span>
-                        </button>
-                        <button 
-                                :disabled="index == childrenMetadata.length - 1"
-                                class="link-button"
-                                @click="moveMetadatumDownViaButton(index)"
-                                :aria-label="$i18n.get('label_move_down')">
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
-                            </span>
-                        </button>
-                    </span>
-                    <span 
-                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
-                            v-tooltip="{
-                                content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
-                                autoHide: true,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }"
-                            class="icon grip-icon">
-                        <!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
-                        <svg 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                height="24px"
-                                viewBox="0 0 24 24"
-                                width="24px"
-                                fill="currentColor">
-                            <path
-                                    d="M0 0h24v24H0V0z"
-                                    fill="transparent"/>
-                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                        </svg>
-                    </span>
-                    <span 
-                            v-tooltip="{
-                                content: $i18n.get('label_view_metadata_details'),
-                                autoHide: true,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }"
-                            @click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
-                            class="gray-icon icon"
-                            :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
-                        <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
-                    </span>
-                    <span class="metadatum-name">
-                            {{ metadatum.name }}
-                    </span>
-                    <span   
-                            v-if="metadatum.id != undefined && metadatum.metadata_type_object"
-                            class="label-details">
-                        <span 
-                                v-if="metadatum.required === 'yes'"
-                                v-tooltip="{
-                                    content: $i18n.get('label_required'),
-                                    autoHide: true,
-                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                    placement: 'auto-start'
-                                }">
-                            *&nbsp;
-                        </span>
-                        ({{ metadatum.metadata_type_object.name }}) 
-                        <!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
-                        <em 
-                                v-if="metadatum.metadata_type_object.core && 
-                                    metadatum.metadata_type_object.related_mapped_prop == 'title'">
-                                {{ $i18n.get('label_core_title') }}
-                        </em>
-                        <em 
-                                v-if="metadatum.metadata_type_object.core && 
-                                    metadatum.metadata_type_object.related_mapped_prop == 'description'">
-                                {{ $i18n.get('label_core_description') }}
-                        </em>
-                        <span 
-                                v-if="metadatum.status == 'private'"
-                                class="icon"
-                                v-tooltip="{
-                                    content: $i18n.get('status_private'),
-                                    autoHide: true,
-                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                    placement: 'auto-start'
-                                }">
-                            <i class="tainacan-icon tainacan-icon-private"/>
+                        class="active-metadatum-item"
+                        :class="{
+                            'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
+                            'not-focusable-item': openedMetadatumId == metadatum.id,
+                            'disabled-metadatum': parent.enabled == false,
+                            'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
+                        }" 
+                        v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
+                    <div 
+                            :ref="'metadatum-handler-' + metadatum.id"
+                            class="handle">
+                        <span class="sorting-buttons">
+                            <button 
+                                    :disabled="index == 0"
+                                    class="link-button"
+                                    @click="moveMetadatumUpViaButton(index)"
+                                    :aria-label="$i18n.get('label_move_up')">
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
+                                </span>
+                            </button>
+                            <button 
+                                    :disabled="index == childrenMetadata.length - 1"
+                                    class="link-button"
+                                    @click="moveMetadatumDownViaButton(index)"
+                                    :aria-label="$i18n.get('label_move_down')">
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
+                                </span>
+                            </button>
                         </span>
                         <span 
+                                :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
                                 v-tooltip="{
-                                    content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
+                                    content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                     autoHide: true,
                                     popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
                                     placement: 'auto-start'
                                 }"
-                                class="icon icon-level-identifier">
-                            <i 
-                                :class="{ 
-                                    'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                    'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
-                                    'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                    'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
-                                    'has-text-gray3': !parent.enabled
-                                }"
-                                class="tainacan-icon" />
+                                class="icon grip-icon">
+                            <!-- <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/> -->
+                            <svg 
+                                    xmlns="http://www.w3.org/2000/svg" 
+                                    height="24px"
+                                    viewBox="0 0 24 24"
+                                    width="24px"
+                                    fill="currentColor">
+                                <path
+                                        d="M0 0h24v24H0V0z"
+                                        fill="transparent"/>
+                                <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                            </svg>
                         </span>
-                    </span>
-                    <span 
-                            class="loading-spinner" 
-                            v-if="metadatum.id == undefined"/>
-                    <span 
-                            class="controls" 
-                            v-if="metadatum.id !== undefined">
-                        <a 
-                                v-if="metadatum.current_user_can_edit"
-                                :style="{ visibility: 
-                                        metadatum.collection_id != collectionId
-                                        ? 'hidden' : 'visible'
-                                    }" 
-                                @click.prevent="toggleMetadatumEdition(metadatum.id)">
+                        <span 
+                                v-tooltip="{
+                                    content: $i18n.get('label_view_metadata_details'),
+                                    autoHide: true,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }"
+                                @click="Object.assign( collapses, { [metadatum.id]: !isCollapseOpen(metadatum.id) })"
+                                class="gray-icon icon"
+                                :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
+                            <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                        </span>
+                        <span class="metadatum-name">
+                                {{ metadatum.name }}
+                        </span>
+                        <span   
+                                v-if="metadatum.id != undefined && metadatum.metadata_type_object"
+                                class="label-details">
+                            <span 
+                                    v-if="metadatum.required === 'yes'"
+                                    v-tooltip="{
+                                        content: $i18n.get('label_required'),
+                                        autoHide: true,
+                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                        placement: 'auto-start'
+                                    }">
+                                *&nbsp;
+                            </span>
+                            ({{ metadatum.metadata_type_object.name }}) 
+                            <!-- <em v-if="metadatum.collection_id != collectionId">{{ $i18n.get('label_inherited') }}</em> -->
+                            <em 
+                                    v-if="metadatum.metadata_type_object.core && 
+                                        metadatum.metadata_type_object.related_mapped_prop == 'title'">
+                                    {{ $i18n.get('label_core_title') }}
+                            </em>
+                            <em 
+                                    v-if="metadatum.metadata_type_object.core && 
+                                        metadatum.metadata_type_object.related_mapped_prop == 'description'">
+                                    {{ $i18n.get('label_core_description') }}
+                            </em>
+                            <span 
+                                    v-if="metadatum.status == 'private'"
+                                    class="icon"
+                                    v-tooltip="{
+                                        content: $i18n.get('status_private'),
+                                        autoHide: true,
+                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                        placement: 'auto-start'
+                                    }">
+                                <i class="tainacan-icon tainacan-icon-private"/>
+                            </span>
                             <span 
                                     v-tooltip="{
-                                        content: $i18n.get('edit'),
+                                        content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
                                         autoHide: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
                                         placement: 'auto-start'
                                     }"
-                                    class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                            </span>
-                        </a>
-                        <a 
-                                v-if="metadatum.current_user_can_delete"
-                                :style="{ visibility: 
-                                        metadatum.collection_id != collectionId ||
-                                            metadatum.metadata_type_object.related_mapped_prop == 'title' ||
-                                        metadatum.metadata_type_object.related_mapped_prop == 'description'
-                                        ? 'hidden' : 'visible'
-                                    }" 
-                                @click.prevent="removeMetadatum(metadatum)">
-                            <span
-                                    v-tooltip="{
-                                        content: $i18n.get('delete'),
-                                        autoHide: true,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        placement: 'auto-start'
+                                    class="icon icon-level-identifier">
+                                <i 
+                                    :class="{ 
+                                        'tainacan-icon-collection': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                        'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
+                                        'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                        'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
+                                        'has-text-gray3': !parent.enabled
                                     }"
-                                    class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                    class="tainacan-icon" />
                             </span>
-                        </a>
-                    </span>
+                        </span>
+                        <span 
+                                class="loading-spinner" 
+                                v-if="metadatum.id == undefined"/>
+                        <span 
+                                class="controls" 
+                                v-if="metadatum.id !== undefined">
+                            <a 
+                                    v-if="metadatum.current_user_can_edit"
+                                    :style="{ visibility: 
+                                            metadatum.collection_id != collectionId
+                                            ? 'hidden' : 'visible'
+                                        }" 
+                                    @click.prevent="toggleMetadatumEdition(metadatum.id)">
+                                <span 
+                                        v-tooltip="{
+                                            content: $i18n.get('edit'),
+                                            autoHide: true,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            placement: 'auto-start'
+                                        }"
+                                        class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                </span>
+                            </a>
+                            <a 
+                                    v-if="metadatum.current_user_can_delete"
+                                    :style="{ visibility: 
+                                            metadatum.collection_id != collectionId ||
+                                                metadatum.metadata_type_object.related_mapped_prop == 'title' ||
+                                            metadatum.metadata_type_object.related_mapped_prop == 'description'
+                                            ? 'hidden' : 'visible'
+                                        }" 
+                                    @click.prevent="removeMetadatum(metadatum)">
+                                <span
+                                        v-tooltip="{
+                                            content: $i18n.get('delete'),
+                                            autoHide: true,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            placement: 'auto-start'
+                                        }"
+                                        class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                </span>
+                            </a>
+                        </span>
+                    </div>
+                    <transition name="form-collapse">
+                        <metadatum-details 
+                                v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
+                                :metadatum="metadatum" />
+                    </transition>
+                    <b-modal 
+                            @close="onEditionCanceled()"
+                            :model-value="openedMetadatumId == metadatum.id"
+                            trap-focus
+                            aria-modal
+                            aria-role="dialog"
+                            custom-class="tainacan-modal"
+                            :close-button-aria-label="$i18n.get('close')">
+                        <metadatum-edition-form
+                                :collection-id="collectionId"
+                                :original-metadatum="metadatum"
+                                :is-parent-multiple="isParentMultiple"
+                                :is-repository-level="isRepositoryLevel"
+                                @onEditionFinished="onEditionFinished()"
+                                @onEditionCanceled="onEditionCanceled()"
+                                :index="index" />
+                    </b-modal>
                 </div>
-                <transition name="form-collapse">
-                    <metadatum-details 
-                            v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
-                            :metadatum="metadatum" />
-                </transition>
-                <b-modal 
-                        @close="onEditionCanceled()"
-                        :active="openedMetadatumId == metadatum.id"
-                        trap-focus
-                        aria-modal
-                        aria-role="dialog"
-                        custom-class="tainacan-modal"
-                        :close-button-aria-label="$i18n.get('close')">
-                    <metadatum-edition-form
-                            :collection-id="collectionId"
-                            :original-metadatum="metadatum"
-                            :is-parent-multiple="isParentMultiple"
-                            :is-repository-level="isRepositoryLevel"
-                            @onEditionFinished="onEditionFinished()"
-                            @onEditionCanceled="onEditionCanceled()"
-                            :index="index" />
-                </b-modal>
-            </div>
-        </draggable>
+            </template>
+        </sortable>
     </div>
 </template>
 
@@ -233,10 +240,13 @@
     import MetadatumDetails from '../../other/metadatum-details.vue';
     import CustomDialog from '../../other/custom-dialog.vue';
 
+    import { Sortable } from 'sortablejs-vue3';
+
     export default {
         components: {
             MetadatumEditionForm,
-            MetadatumDetails
+            MetadatumDetails,
+            Sortable
         },
         props: {
             isRepositoryLevel: Boolean,
@@ -316,13 +326,27 @@
                 'deleteMetadatum',
                 'updateChildMetadataOrder'
             ]),
-            handleChange(event) {     
-                if (event.added)
-                    this.addNewMetadatum(event.added.element, event.added.newIndex);
-                else if (event.removed)
-                    this.removeMetadatum(event.removed.element);
-                else if (event.moved)
-                    this.updateMetadataOrder();
+            handleChange($event) {  
+                
+                switch ($event.type) {
+                    case 'add':
+                        this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
+                        break;
+                    case 'remove':
+                        this.removeMetadatum(this.childrenMetadata[$event.oldIndex]);
+                        break;
+                    case 'update': {
+
+                        const newChildrenMetadata = JSON.parse(JSON.stringify(this.childrenMetadata));
+                        const element = newChildrenMetadata.splice($event.oldIndex, 1)[0];
+                        newChildrenMetadata.splice($event.newIndex, 0, element);
+
+                        this.childrenMetadata = newChildrenMetadata;
+
+                        this.updateMetadataOrder();
+                        break;
+                    }
+                }
             },
             updateMetadataOrder() {
                 let metadataOrder = [];
diff --git a/src/views/admin/components/metadata-types/date/Date.vue b/src/views/admin/components/metadata-types/date/Date.vue
index fe5cfa2de..95c2b96c6 100644
--- a/src/views/admin/components/metadata-types/date/Date.vue
+++ b/src/views/admin/components/metadata-types/date/Date.vue
@@ -6,8 +6,8 @@
                 :custom-class="{ 'is-danger': isInvalidDate && dateValue }"
                 type="text"
                 v-mask="dateMask"
-                v-model:value="dateValue"
-                @input="onInput"
+                v-model="dateValue"
+                @update:model-value="onInput"
                 @blur="onBlur"
                 @focus="onMobileSpecialFocus"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : dateFormat.toLowerCase()" />
@@ -15,22 +15,6 @@
                 v-if="isInvalidDate && dateValue"
                 style="font-size: 0.75em;"
                 class="has-text-danger is-italic">{{ $i18n.get('info_error_invalid_date') }}</p>
-        <!--<b-collapse-->
-                <!--position="is-bottom-right">-->
-            <!--<span class="icon"-->
-                    <!--icon="calendar-today"-->
-                    <!--size="is-small"-->
-                    <!--slot="trigger" />-->
-
-            <!--<div class="field">-->
-                <!--<b-datepicker-->
-                        <!--v-model:value="dateValue"-->
-                        <!--:readonly="false"-->
-                        <!--inline-->
-                        <!--@input="onInput($event)"-->
-                        <!--:placeholder="datePlaceHolder"/>-->
-            <!--</div>-->
-        <!--</b-collapse>-->
     </div>
 </template>
 
diff --git a/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue
index f1a4d0240..0cb76c2d5 100644
--- a/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue
+++ b/src/views/admin/components/metadata-types/geocoordinate/FormGeoCoordinate.vue
@@ -10,8 +10,8 @@
                 </label>
                 <b-input
                         name="mapProvider"
-                        v-model:value="mapProvider"
-                        @input="emitValues()"
+                        v-model="mapProvider"
+                        @update:model-value="emitValues()"
                         placeholder="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
         </b-field>
 
@@ -26,8 +26,8 @@
                 </label>
                 <b-input
                         name="attribution"
-                        v-model:value="attribution"
-                        @input="emitValues()"
+                        v-model="attribution"
+                        @update:model-value="emitValues()"
                         placeholder="© OpenStreetMap contributors" />
 
         </b-field>
@@ -43,8 +43,8 @@
                 </label>
                 <b-numberinput
                         name="initialZoom"
-                        v-model:value="initialZoom"
-                        @input="emitValues()"
+                        v-model="initialZoom"
+                        @update:model-value="emitValues()"
                         :step="1"
                         :max="19"
                         :min="1" />
@@ -61,8 +61,8 @@
                 </label>
                 <b-numberinput
                         name="maximumZoom"
-                        v-model:value="maximumZoom"
-                        @input="emitValues()"
+                        v-model="maximumZoom"
+                        @update:model-value="emitValues()"
                         :step="1"
                         :max="19"
                         :min="1" />
diff --git a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
index 101b0030a..8bf3acb50 100644
--- a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
+++ b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue
@@ -27,16 +27,16 @@
                             :placeholder="-14.408656999999"
                             type="text"
                             :step="0.000000000001"
-                            @input="onUpdateFromLatitudeInput"
-                            :value="latitude" />
+                            @update:model-value="onUpdateFromLatitudeInput"
+                            :model-value="latitude" />
                     <b-input 
                             v-if="editingMarkerIndex >= 0"
                             expanded
                             :placeholder="-51.316689999999"
                             type="text"
                             :step="0.000000000001"
-                            @input="onUpdateFromLongitudeInput"
-                            :value="longitude" />
+                            @update:model-value="onUpdateFromLongitudeInput"
+                            :model-value="longitude" />
                     <b-button
                             v-if="editingMarkerIndex >= 0"
                             outlined
diff --git a/src/views/admin/components/metadata-types/numeric/FormNumeric.vue b/src/views/admin/components/metadata-types/numeric/FormNumeric.vue
index 0a22ac042..e424175a3 100644
--- a/src/views/admin/components/metadata-types/numeric/FormNumeric.vue
+++ b/src/views/admin/components/metadata-types/numeric/FormNumeric.vue
@@ -12,8 +12,8 @@
                     class="is-flex">
                 <b-select
                         name="step_options"
-                        v-model:value="step"
-                        @input="onUpdateStep">
+                        v-model="step"
+                        @update:model-value="onUpdateStep">
                     <option value="0.001">0.001</option>
                     <option value="0.01">0.01</option>
                     <option value="0.1">0.1</option>
@@ -49,8 +49,8 @@
                     class="is-flex">
                 <b-input
                         name="max_options"
-                        v-model:value="step"
-                        @input="onUpdateStep"
+                        v-model="step"
+                        @update:model-value="onUpdateStep"
                         type="number"
                         step="1" />
                 <button
diff --git a/src/views/admin/components/metadata-types/numeric/Numeric.vue b/src/views/admin/components/metadata-types/numeric/Numeric.vue
index 067531267..65484ebcf 100644
--- a/src/views/admin/components/metadata-types/numeric/Numeric.vue
+++ b/src/views/admin/components/metadata-types/numeric/Numeric.vue
@@ -3,8 +3,8 @@
             :disabled="disabled"
             :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
             :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
-            :value="value"
-            @input="onInput($event);"
+            :model-value="value"
+            @update:model-value="onInput($event);"
             @blur="onBlur"
             @focus="onMobileSpecialFocus"
             type="number"
diff --git a/src/views/admin/components/metadata-types/relationship/FormRelationship.vue b/src/views/admin/components/metadata-types/relationship/FormRelationship.vue
index dbe81657e..a6118c32d 100644
--- a/src/views/admin/components/metadata-types/relationship/FormRelationship.vue
+++ b/src/views/admin/components/metadata-types/relationship/FormRelationship.vue
@@ -14,7 +14,7 @@
             <b-select
                     name="metadata_type_relationship[collection_id]"
                     :placeholder="$i18n.get('instruction_select_collection_fetch_items' )"
-                    v-model:value="collection"
+                    v-model="collection"
                     @change="emitValues()"
                     @focus="clear()"
                     :loading="loading"
@@ -45,7 +45,7 @@
                 </label>
                 <b-select
                         name="metadata_type_relationship[search]"
-                        v-model:value="modelSearch"
+                        v-model="modelSearch"
                         expanded>
                     <option
                             v-for="(option, index) in metadata.filter(metadatum => metadatum.metadata_type_object.component !== 'tainacan-compound')"
@@ -71,8 +71,8 @@
                     <b-checkbox
                             native-value="thumbnail"
                             name="metadata_type_relationship[display_related_item_metadata]"
-                            @input="emitValues()"
-                            v-model:value="displayRelatedItemMetadata">
+                            @update:model-value="emitValues()"
+                            v-model="displayRelatedItemMetadata">
                         {{ $i18n.get('label_thumbnail') }}
                     </b-checkbox>
                     <b-checkbox
@@ -80,8 +80,8 @@
                             :key="index"
                             :native-value="metadatumOption.id"
                             name="metadata_type_relationship[display_related_item_metadata]"
-                            @input="emitValues()"
-                            v-model:value="displayRelatedItemMetadata"
+                            @update:model-value="emitValues()"
+                            v-model="displayRelatedItemMetadata"
                             :disabled="metadatumOption.id == modelSearch">
                         {{ metadatumOption.name }}
                     </b-checkbox>
@@ -95,8 +95,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="modelDisplayInRelatedItems"
-                    @input="emitValues()"
+                    v-model="modelDisplayInRelatedItems"
+                    @update:model-value="emitValues()"
                     true-value="yes"
                     false-value="no" />
             <help-button
@@ -110,8 +110,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="modelAcceptDraftItems"
-                    @input="emitValues()"
+                    v-model="modelAcceptDraftItems"
+                    @update:model-value="emitValues()"
                     true-value="yes"
                     false-value="no" />
             <help-button
diff --git a/src/views/admin/components/metadata-types/relationship/Relationship.vue b/src/views/admin/components/metadata-types/relationship/Relationship.vue
index 3592822b3..939e6cf68 100644
--- a/src/views/admin/components/metadata-types/relationship/Relationship.vue
+++ b/src/views/admin/components/metadata-types/relationship/Relationship.vue
@@ -3,7 +3,7 @@
         <b-tabs
                 size="is-small"
                 animated
-                v-model:value="activeTab">
+                v-model="activeTab">
             <b-tab-item :label="$i18n.get('label_insert_items')">
                 <b-taginput
                         expanded
@@ -11,8 +11,8 @@
                         :id="relationshipInputId"
                         size="is-small"
                         icon="magnify"
-                        :value="selected"
-                        @input="onInput"
+                        :model-value="selected"
+                        @update:model-value="onInput"
                         @blur="onBlur"
                         @add="onAdd"
                         @remove="onRemove"
@@ -127,7 +127,7 @@
             </a>
             <b-modal 
                     :width="1200"
-                    v-model:active="editItemModalOpen"
+                    v-model="editItemModalOpen"
                     :custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')"
                     :close-button-aria-label="$i18n.get('close')">
                 <iframe 
diff --git a/src/views/admin/components/metadata-types/selectbox/FormSelectbox.vue b/src/views/admin/components/metadata-types/selectbox/FormSelectbox.vue
index 8bd514dee..78769ab49 100644
--- a/src/views/admin/components/metadata-types/selectbox/FormSelectbox.vue
+++ b/src/views/admin/components/metadata-types/selectbox/FormSelectbox.vue
@@ -23,8 +23,8 @@
             </label>
 
             <b-taginput
-                    v-model:value="options"
-                    @input="emitValues()"
+                    v-model="options"
+                    @update:model-value="emitValues()"
                     @focus="clear()"
                     attached
                     :confirm-keys="optionsSeparator"
@@ -40,8 +40,8 @@
                         v-for="separator of ['Enter', 'Tab', ',', ';', '|']"
                         :key="separator"
                         name="metadata_type_selectbox[options_separator]"
-                        @input="emitValues()"
-                        v-model:value="optionsSeparator"
+                        @update:model-value="emitValues()"
+                        v-model="optionsSeparator"
                         :native-value="separator"
                         :disabled="separator == 'Enter'">
                     <kbd>{{ separator }}</kbd>
diff --git a/src/views/admin/components/metadata-types/selectbox/Selectbox.vue b/src/views/admin/components/metadata-types/selectbox/Selectbox.vue
index ec5966978..d365bb68f 100644
--- a/src/views/admin/components/metadata-types/selectbox/Selectbox.vue
+++ b/src/views/admin/components/metadata-types/selectbox/Selectbox.vue
@@ -11,8 +11,8 @@
                 :disabled="disabled"
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('label_selectbox_init')"
-                :value="value"
-                @input="onSelected($event)">
+                :model-value="value"
+                @update:model-value="onSelected($event)">
             <option value="">{{ itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ($i18n.get('label_selectbox_init') + '...') }}</option>
             <option
                     v-for="(option, index) in getOptions"
diff --git a/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue b/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
index 5cab63f15..da07b6402 100644
--- a/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
@@ -15,8 +15,8 @@
             <b-select
                     name="field_type_options[taxonomy_id]"
                     placeholder="Select the taxonomy"
-                    v-model:value="taxonomy_id"
-                    @input="emitValues()"
+                    v-model="taxonomy_id"
+                    @update:model-value="emitValues()"
                     @focus="clear"
                     :loading="loading"
                     expanded>
@@ -41,8 +41,8 @@
                     v-if="listInputType"
                     name="metadata_type_options[component_type]"
                     placeholder="Select the input type for the taxonomy metadatum"
-                    @input="emitValues()"
-                    v-model:value="input_type"
+                    @update:model-value="emitValues()"
+                    v-model="input_type"
                     expanded>
                 <option
                         v-for="(option, index) in single_types"
@@ -55,8 +55,8 @@
             <b-select
                     name="metadata_type_options[input_type]"
                     placeholder="Select the input type for the taxonomy metadatum"
-                    v-model:value="input_type"
-                    @input="emitValues()"
+                    v-model="input_type"
+                    @update:model-value="emitValues()"
                     v-else
                     expanded>
                 <option
@@ -75,8 +75,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="visible_options_list"
-                    @input="emitValues()" />
+                    v-model="visible_options_list"
+                    @update:model-value="emitValues()" />
             <help-button
                     :title="$i18n.getHelperTitle('tainacan-taxonomy', 'visible_options_list')"
                     :message="$i18n.getHelperMessage('tainacan-taxonomy', 'visible_options_list')"/>
@@ -88,8 +88,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="allow_new_terms"
-                    @input="emitValues()"
+                    v-model="allow_new_terms"
+                    @update:model-value="emitValues()"
                     true-value="yes"
                     false-value="no" />
             <help-button
@@ -103,8 +103,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="do_not_dispaly_term_as_link"
-                    @input="emitValues()"
+                    v-model="do_not_dispaly_term_as_link"
+                    @update:model-value="emitValues()"
                     true-value="yes"
                     false-value="no" />
             <help-button
@@ -119,12 +119,12 @@
                     :message="$i18n.getHelperMessage('tainacan-taxonomy', 'link_filtered_by_collections')"/>
             </label>
             <b-taginput
-                    :value="getSelectedTaxonomyCollections()"
+                    :model-value="getSelectedTaxonomyCollections()"
                     autocomplete
                     :open-on-focus="true"
                     :data="collections.filter((collection) => !link_filtered_by_collections.includes(collection.id) && (collectionSearchString ? (collection.name.toLowerCase().indexOf(collectionSearchString.toLowerCase()) >= 0) : true) )"
                     field="name"
-                    @input="updateSelectedCollections"
+                    @update:model-value="updateSelectedCollections"
                     @focus="clear()"
                     attached
                     :disabled="do_not_dispaly_term_as_link == 'yes'"
@@ -160,8 +160,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="hide_hierarchy_path"
-                    @input="emitValues()"
+                    v-model="hide_hierarchy_path"
+                    @update:model-value="emitValues()"
                     true-value="yes"
                     false-value="no" />
             <help-button
diff --git a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
index 080fff97f..27fb30b65 100644
--- a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
@@ -50,7 +50,7 @@
 
         <!-- Term creation modal, used on admin for a complete term creation -->
         <b-modal
-                v-model:value="isTermCreationModalOpen"
+                v-model="isTermCreationModalOpen"
                 :width="768"
                 trap-focus
                 aria-role="dialog"
diff --git a/src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue b/src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
index ecdbea0bb..9462f141f 100644
--- a/src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
@@ -8,7 +8,7 @@
             :allow-new="false"
             @add="emitAdd"
             @remove="emitRemove"
-            v-model:value="selected"
+            v-model="selected"
             :data="labels"
             :maxtags="maxtags"
             field="label"
diff --git a/src/views/admin/components/metadata-types/text/FormText.vue b/src/views/admin/components/metadata-types/text/FormText.vue
index 5c9429b59..1ccd7f196 100644
--- a/src/views/admin/components/metadata-types/text/FormText.vue
+++ b/src/views/admin/components/metadata-types/text/FormText.vue
@@ -6,8 +6,8 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    :value="displaySuggestions"
-                    @input="onUpdateDisplaySuggestions"
+                    :model-value="displaySuggestions"
+                    @update:model-value="onUpdateDisplaySuggestions"
                     :true-value="'yes'"
                     :false-value="'no'" />
             <help-button
diff --git a/src/views/admin/components/metadata-types/text/Text.vue b/src/views/admin/components/metadata-types/text/Text.vue
index 88212a4bd..9fb22e443 100644
--- a/src/views/admin/components/metadata-types/text/Text.vue
+++ b/src/views/admin/components/metadata-types/text/Text.vue
@@ -4,20 +4,20 @@
                 v-if="!getDisplayAutocomplete"
                 :disabled="disabled"
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
-                :value="value"
+                :model-value="value"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
-                @input="onInput($event)"
+                @update:model-value="onInput($event)"
                 @blur="onBlur"
                 @focus="onMobileSpecialFocus" />
         <b-autocomplete
                 v-else
                 :disabled="disabled"
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
-                :value="value"
+                :model-value="value"
                 @blur="onBlur"
                 :data="options"
                 :loading="isLoadingOptions"
-                @input="($event) => { search($event); }"
+                @update:model-value="($event) => { search($event); }"
                 field="label"
                 @select="onSelect"
                 clearable
diff --git a/src/views/admin/components/metadata-types/textarea/Textarea.vue b/src/views/admin/components/metadata-types/textarea/Textarea.vue
index 5b8da62fe..9d75210e3 100644
--- a/src/views/admin/components/metadata-types/textarea/Textarea.vue
+++ b/src/views/admin/components/metadata-types/textarea/Textarea.vue
@@ -3,8 +3,8 @@
             :disabled="disabled"
             :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
             :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
-            :value="value"
-            @input="onInput($event)"
+            :model-value="value"
+            @update:model-value="onInput($event)"
             @blur="onBlur"
             type="textarea"
             @focus="onMobileSpecialFocus" />
diff --git a/src/views/admin/components/metadata-types/user/FormUser.vue b/src/views/admin/components/metadata-types/user/FormUser.vue
index bc1199ae3..fd4692ef8 100644
--- a/src/views/admin/components/metadata-types/user/FormUser.vue
+++ b/src/views/admin/components/metadata-types/user/FormUser.vue
@@ -8,8 +8,8 @@
                         :message="$i18n.getHelperMessage('tainacan-user', 'default_author')"/>
             </label>
             <b-checkbox
-                    v-model:value="defaultAuthor"
-                    @input="onUpdateDefaultAuthor"
+                    v-model="defaultAuthor"
+                    @update:model-value="onUpdateDefaultAuthor"
                     true-value="yes"
                     false-value="no">
                 {{ $i18n.get('label_default_author_user') }}
diff --git a/src/views/admin/components/metadata-types/user/User.vue b/src/views/admin/components/metadata-types/user/User.vue
index 58ef6c377..3f0d4d8ae 100644
--- a/src/views/admin/components/metadata-types/user/User.vue
+++ b/src/views/admin/components/metadata-types/user/User.vue
@@ -6,8 +6,8 @@
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 size="is-small"
                 icon="account"
-                :value="selected"
-                @input="onInput"
+                :model-value="selected"
+                @update:model-value="onInput"
                 @blur="onBlur"
                 :data="options"
                 :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
diff --git a/src/views/admin/components/modals/activity-details-modal.vue b/src/views/admin/components/modals/activity-details-modal.vue
index 5d3b07725..c3fcd392d 100644
--- a/src/views/admin/components/modals/activity-details-modal.vue
+++ b/src/views/admin/components/modals/activity-details-modal.vue
@@ -15,7 +15,7 @@
         </header>
         <b-loading 
                 :is-full-page="false"
-                v-model:active="isLoadingActivity" 
+                v-model="isLoadingActivity" 
                 :can-cancel="false"/>
         <div 
                 v-if="!isLoadingActivity"
diff --git a/src/views/admin/components/modals/available-exporters-modal.vue b/src/views/admin/components/modals/available-exporters-modal.vue
index ef818ac67..4a671e54d 100644
--- a/src/views/admin/components/modals/available-exporters-modal.vue
+++ b/src/views/admin/components/modals/available-exporters-modal.vue
@@ -43,7 +43,7 @@
                 </footer>
 
                 <b-loading
-                        v-model:active="isLoading"
+                        v-model="isLoading"
                         :can-cancel="false"/>
             </section>
         </div>
diff --git a/src/views/admin/components/modals/available-importers-modal.vue b/src/views/admin/components/modals/available-importers-modal.vue
index b365f8eaa..9bd55e6c5 100644
--- a/src/views/admin/components/modals/available-importers-modal.vue
+++ b/src/views/admin/components/modals/available-importers-modal.vue
@@ -32,7 +32,7 @@
 
                     <b-loading 
                         :is-full-page="false"
-                        v-model:active="isLoading" 
+                        v-model="isLoading" 
                         :can-cancel="false"/>
                 </div>
                 
diff --git a/src/views/admin/components/modals/bulk-edition-modal.vue b/src/views/admin/components/modals/bulk-edition-modal.vue
index 96d0597a1..19c914afe 100644
--- a/src/views/admin/components/modals/bulk-edition-modal.vue
+++ b/src/views/admin/components/modals/bulk-edition-modal.vue
@@ -30,7 +30,7 @@
                                 :disabled="!!bulkEditionProcedures[criterion].metadatum || metadataIsLoading"
                                 class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                                 :placeholder="$i18n.get('instruction_select_a_metadatum')"
-                                @input="addToBulkEditionProcedures($event, 'metadatum', criterion)">
+                                @update:model-value="addToBulkEditionProcedures($event, 'metadatum', criterion)">
                             <template 
                                     v-for="(metadatum, index) in metadata"
                                     :key="index">
@@ -66,10 +66,10 @@
                         <b-select
                                 :class="{'is-field-history': bulkEditionProcedures[criterion].isDone, 'hidden-select-arrow': !!bulkEditionProcedures[criterion].action }"
                                 :disabled="!!bulkEditionProcedures[criterion].action || !bulkEditionProcedures[criterion].metadatum"
-                                :value="bulkEditionProcedures[criterion].action ? bulkEditionProcedures[criterion].action : undefined"
+                                :model-value="bulkEditionProcedures[criterion].action ? bulkEditionProcedures[criterion].action : undefined"
                                 class="tainacan-bulk-edition-field tainacan-bulk-edition-field-not-last"
                                 :placeholder="$i18n.get('instruction_select_a_action')"
-                                @input="addToBulkEditionProcedures($event, 'action', criterion)">
+                                @update:model-value="addToBulkEditionProcedures($event, 'action', criterion)">
                             <template v-if="bulkEditionProcedures[criterion].metadatum">
                                 <option
                                         v-for="(edtAct, key) in getValidEditionActions(bulkEditionProcedures[criterion].metadatum)"
@@ -129,7 +129,7 @@
                                             :disabled="bulkEditionProcedures[criterion].isDone"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :placeholder="$i18n.get('instruction_select_a_status2')"
-                                            @input="addToBulkEditionProcedures($event, 'newValue', criterion)">
+                                            @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
                                         <option
                                                 v-for="(statusOption, index) of $statusHelper.getStatuses().filter(option => { return option.value != 'trash' })"
                                                 :key="index"
@@ -145,7 +145,7 @@
                                             :disabled="bulkEditionProcedures[criterion].isDone"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :placeholder="$i18n.get('instruction_select_a_comments_status')"
-                                            @input="addToBulkEditionProcedures($event, 'newValue', criterion)">
+                                            @update:model-value="addToBulkEditionProcedures($event, 'newValue', criterion)">
                                         <option
                                                 v-for="(statusOption, index) of $commentsStatusHelper.getStatuses()"
                                                 :key="index"
@@ -162,7 +162,7 @@
                                             :disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting && !!bulkEditionProcedures[criterion].metadatumIdCopyFrom || metadataIsLoading"
                                             class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last"
                                             :placeholder="$i18n.get('instruction_select_a_metadatum')"
-                                            @input="addToBulkEditionProcedures($event, 'metadatumIdCopyFrom', criterion)">
+                                            @update:model-value="addToBulkEditionProcedures($event, 'metadatumIdCopyFrom', criterion)">
                                         <template 
                                                 v-for="(metadatumForCopy, index) in getAllowedMetadataForCopy(criterion)"
                                                 :key="index">
diff --git a/src/views/admin/components/modals/capability-edition-modal.vue b/src/views/admin/components/modals/capability-edition-modal.vue
index 30034d9a2..b6b8e4f4f 100644
--- a/src/views/admin/components/modals/capability-edition-modal.vue
+++ b/src/views/admin/components/modals/capability-edition-modal.vue
@@ -21,8 +21,8 @@
                                 :key="roleIndex">
                             <b-checkbox
                                     v-if="!capability.roles_inherited[role.slug]"
-                                    :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
-                                    @input="($event) => updateRole(role.slug, $event)"
+                                    :model-value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
+                                    @update:model-value="($event) => updateRole(role.slug, $event)"
                                     name="roles">
                                 {{ role.name }}
                             </b-checkbox>
@@ -56,7 +56,7 @@
                             <b-checkbox
                                     v-if="capability.roles_inherited[role.slug]"
                                     class="has-text-yellow2"
-                                    :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
+                                    :model-value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
                                     name="roles_inherited"
                                     disabled>
                                 {{ role.name }}
@@ -75,7 +75,7 @@
     <div v-else>
         <b-loading
                 is-full-page="false" 
-                v-model:active="isLoading" />
+                v-model="isLoading" />
     </div>
     <div class="field is-grouped form-submit">
         <div class="control">
diff --git a/src/views/admin/components/modals/collection-creation-modal.vue b/src/views/admin/components/modals/collection-creation-modal.vue
index 055c677d2..24b680765 100644
--- a/src/views/admin/components/modals/collection-creation-modal.vue
+++ b/src/views/admin/components/modals/collection-creation-modal.vue
@@ -90,12 +90,12 @@
 
             <b-loading 
                     :is-full-page="false"
-                    v-model:active="isLoadingMetadatumMappers" 
+                    v-model="isLoadingMetadatumMappers" 
                     :can-cancel="false"/>
 
             <b-loading 
                     :is-full-page="false"
-                    v-model:active="isCreatingCollectionPreset" 
+                    v-model="isCreatingCollectionPreset" 
                     :can-cancel="false"/>
 
             <footer class="field is-grouped form-submit">
diff --git a/src/views/admin/components/modals/collections-modal.vue b/src/views/admin/components/modals/collections-modal.vue
index 20e9cad14..e3b9bf5ef 100644
--- a/src/views/admin/components/modals/collections-modal.vue
+++ b/src/views/admin/components/modals/collections-modal.vue
@@ -40,7 +40,7 @@
                 </div>
                 <b-loading 
                         :is-full-page="false"
-                        v-model:active="isLoading" 
+                        v-model="isLoading" 
                         :can-cancel="false"/>
                 
                  <footer class="field is-grouped form-submit">
diff --git a/src/views/admin/components/modals/exposers-modal.vue b/src/views/admin/components/modals/exposers-modal.vue
index bec636dde..818064c12 100644
--- a/src/views/admin/components/modals/exposers-modal.vue
+++ b/src/views/admin/components/modals/exposers-modal.vue
@@ -121,7 +121,7 @@
                                 placement: 'bottom',
                                 popperClass: ['tainacan-tooltip', 'tooltip']
                             }" 
-                            v-model:value="shouldRespectFetchOnly">{{ $i18n.get('label_expose_only_displayed_metadata') }}</b-checkbox>
+                            v-model="shouldRespectFetchOnly">{{ $i18n.get('label_expose_only_displayed_metadata') }}</b-checkbox>
                 </div>
                 <b-field 
                         :addons="false"
@@ -228,7 +228,7 @@
 
             <b-loading 
                     :is-full-page="false"
-                    v-model:active="isLoading" 
+                    v-model="isLoading" 
                     :can-cancel="false"/>
 
             <footer class="field is-grouped form-submit">
diff --git a/src/views/admin/components/modals/item-document-text-modal.vue b/src/views/admin/components/modals/item-document-text-modal.vue
index ecd918eba..548ea53fd 100644
--- a/src/views/admin/components/modals/item-document-text-modal.vue
+++ b/src/views/admin/components/modals/item-document-text-modal.vue
@@ -9,7 +9,7 @@
                 ref="item-document-text-input"
                 type="textarea"
                 :autofocus="true"
-                v-model:value="localTextContent"/>
+                v-model="localTextContent"/>
 
         <div class="field is-grouped form-submit">
             <div class="control">
diff --git a/src/views/admin/components/modals/item-document-url-modal.vue b/src/views/admin/components/modals/item-document-url-modal.vue
index 1942ae418..800771084 100644
--- a/src/views/admin/components/modals/item-document-url-modal.vue
+++ b/src/views/admin/components/modals/item-document-url-modal.vue
@@ -7,7 +7,7 @@
         <b-input 
                 aria-labelledby="item-document-url-modal-title"
                 ref="item-document-url-input"
-                v-model:value="localUrlLink" />
+                v-model="localUrlLink" />
         <br>
         <b-field
                 :addons="false"
@@ -15,7 +15,7 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="localUrlForcedIframe" />
+                    v-model="localUrlForcedIframe" />
             <help-button
                     :title="$i18n.get('label_document_option_forced_iframe')"
                     :message="$i18n.get('info_document_option_forced_iframe')" />
@@ -29,7 +29,7 @@
                         :aria-minus-label="$i18n.get('label_decrease')"
                         :aria-plus-label="$i18n.get('label_increase')"
                         min="1" 
-                        v-model:value="localUrlIframeWidth"
+                        v-model="localUrlIframeWidth"
                         step="1" />
             </b-field>
             <b-field :label="$i18n.get('label_document_option_iframe_height')">
@@ -37,7 +37,7 @@
                         :aria-minus-label="$i18n.get('label_decrease')"
                         :aria-plus-label="$i18n.get('label_increase')"
                         min="1" 
-                        v-model:value="localUrlIframeHeight"
+                        v-model="localUrlIframeHeight"
                         step="1" />
             </b-field>
         </b-field>
@@ -55,7 +55,7 @@
                 &nbsp;
             <b-switch
                     size="is-small" 
-                    v-model:value="localUrlIsImage" />
+                    v-model="localUrlIsImage" />
             <help-button
                     :title="$i18n.get('label_document_option_is_image')"
                     :message="$i18n.get('info_document_option_is_image')" />
diff --git a/src/views/admin/components/navigation/tainacan-header.vue b/src/views/admin/components/navigation/tainacan-header.vue
index 92b14f471..f537b7d8c 100644
--- a/src/views/admin/components/navigation/tainacan-header.vue
+++ b/src/views/admin/components/navigation/tainacan-header.vue
@@ -59,8 +59,8 @@
                         :placeholder="$i18n.get('instruction_search_in_repository')"
                         class="search-header"
                         size="is-small"
-                        :value="searchQuery"
-                        @input="futureSearchQuery = $event.target.value"
+                        :model-value="searchQuery"
+                        @update:model-value="futureSearchQuery = $event.target.value"
                         @keyup.enter="updateSearch()"
                         icon-right="magnify"
                         icon-right-clickable
diff --git a/src/views/admin/components/other/checkbox-radio-filter-input.vue b/src/views/admin/components/other/checkbox-radio-filter-input.vue
index fd0db99e3..eda482367 100644
--- a/src/views/admin/components/other/checkbox-radio-filter-input.vue
+++ b/src/views/admin/components/other/checkbox-radio-filter-input.vue
@@ -20,8 +20,8 @@
             <b-tabs
                     size="is-small"
                     animated
-                    @input="fetchSelectedLabels()"
-                    v-model:value="activeTab"
+                    @update:model-value="fetchSelectedLabels()"
+                    v-model="activeTab"
                     :class="{ 'hidden-tabs-section': !isModal || !hasToDisplaySearchBar }">
                 <b-tab-item 
                         :style="{ margin: isModal ? '0' : '0 0 1rem 0' }"
@@ -36,8 +36,8 @@
                                 autocomplete="on"
                                 :placeholder="$i18n.get('instruction_search')"
                                 :aria-label="$i18n.get('instruction_search')"
-                                v-model:value="optionName"
-                                @input="autoComplete"
+                                v-model="optionName"
+                                @update:model-value="autoComplete"
                                 icon-right="magnify"
                                 type="search" />
                     </b-field>
@@ -88,7 +88,7 @@
                             </template>
                             <b-loading
                                     :is-full-page="false"
-                                    v-model:active="isLoadingSearch"/>
+                                    v-model="isLoadingSearch"/>
                         </ul>
                         <a
                                 v-if="!noMoreSearchPage"
@@ -151,7 +151,7 @@
                             </template>
                             <b-loading
                                     :is-full-page="false"
-                                    v-model:active="isCheckboxListLoading"/>
+                                    v-model="isCheckboxListLoading"/>
                         </ul>
                         <a
                                 v-if="!noMorePage"
@@ -250,7 +250,7 @@
 
                     <b-loading
                             :is-full-page="false"
-                            v-model:active="isColumnLoading"/>
+                            v-model="isColumnLoading"/>
                     
                 </b-tab-item>
 
@@ -290,7 +290,7 @@
                         </section>
                         <b-loading
                                 :is-full-page="false"
-                                v-model:active="isSelectedTermsLoading"/>
+                                v-model="isSelectedTermsLoading"/>
                     </div>
                 </b-tab-item>
             </b-tabs>
@@ -813,7 +813,7 @@
                 this.$eventBusSearch.resetPageOnStore();
 
                 if (this.isTaxonomy) {
-                    this.$eventBusSearch.$emit('input', {
+                    this.$eventBusSearchEmitter.emit('input', {
                         filter: 'checkbox',
                         taxonomy: this.taxonomy,
                         compare: 'IN',
@@ -822,7 +822,7 @@
                         terms: this.selected
                     });         
                 } else {
-                    this.$eventBusSearch.$emit('input', {
+                    this.$eventBusSearchEmitter.emit('input', {
                         filter: 'checkbox',
                         compare: 'IN',
                         metadatum_id: this.metadatumId ? this.metadatumId : this.filter.metatadum_id,
diff --git a/src/views/admin/components/other/checkbox-radio-metadata-input.vue b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
index d7c59d690..39a9eba24 100644
--- a/src/views/admin/components/other/checkbox-radio-metadata-input.vue
+++ b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
@@ -10,8 +10,8 @@
         <b-tabs
                 size="is-small"
                 animated
-                @input="fetchSelectedLabels()"
-                v-model:value="activeTab"
+                @update:model-value="fetchSelectedLabels()"
+                v-model="activeTab"
                 :class="{ 'hidden-tabs-section': (shouldBeginWithListExpanded && !hasToDisplaySearchBar) }">
             <b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
                 
@@ -39,8 +39,8 @@
                             autocomplete="on"
                             :placeholder="metadatum.placeholder ? metadatum.placeholder : ( expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search') )"
                             :aria-label="expandResultsSection ? $i18n.get('instruction_search') : $i18n.get('instruction_click_to_see_or_search')"
-                            v-model:value="optionName"
-                            @input="autoComplete"
+                            v-model="optionName"
+                            @update:model-value="autoComplete"
                             @focus="!shouldBeginWithListExpanded && !expandResultsSection ? toggleResultsSection() : null"
                             icon-right="magnify"
                             type="search" />
@@ -101,7 +101,7 @@
                         </template>
                         <b-loading
                                 :is-full-page="false"
-                                v-model:active="isLoadingSearch"/>
+                                v-model="isLoadingSearch"/>
                     </ul>
                     <a
                             v-if="!noMoreSearchPage"
@@ -153,7 +153,7 @@
                         </li>
                         <b-loading
                                 :is-full-page="false"
-                                v-model:active="isCheckboxListLoading"/>
+                                v-model="isCheckboxListLoading"/>
                     </ul>
                     <a
                             v-if="!noMorePage"
@@ -258,7 +258,7 @@
 
                 <b-loading
                         :is-full-page="false"
-                        v-model:active="isColumnLoading"/>
+                        v-model="isColumnLoading"/>
                 
             </b-tab-item>
 
@@ -301,7 +301,7 @@
                     </section>
                     <b-loading
                             :is-full-page="false"
-                            v-model:active="isSelectedTermsLoading"/>
+                            v-model="isSelectedTermsLoading"/>
                 </div>
             </b-tab-item>
         </b-tabs>
diff --git a/src/views/admin/components/other/custom-dialog.vue b/src/views/admin/components/other/custom-dialog.vue
index 80386a3aa..d9956c599 100644
--- a/src/views/admin/components/other/custom-dialog.vue
+++ b/src/views/admin/components/other/custom-dialog.vue
@@ -33,7 +33,7 @@
                 <span v-html="message" />
                 <div v-if="showNeverShowAgainOption">
                     <b-checkbox
-                            @input="changeNeverShowMessageAgain($event)"
+                            @update:model-value="changeNeverShowMessageAgain($event)"
                             :native-value="neverShowAgain">
                         {{ $i18n.get('instruction_never_show_message_again') }}
                     </b-checkbox>
diff --git a/src/views/admin/components/other/item-copy-dialog.vue b/src/views/admin/components/other/item-copy-dialog.vue
index 801aa0cfa..a4cdfff77 100644
--- a/src/views/admin/components/other/item-copy-dialog.vue
+++ b/src/views/admin/components/other/item-copy-dialog.vue
@@ -42,9 +42,9 @@
                                 :aria-minus-label="$i18n.get('label_decrease')"
                                 :aria-plus-label="$i18n.get('label_increase')"
                                 min="1" 
-                                :value="copyCount"
+                                :model-value="copyCount"
                                 step="1"
-                                @input="copyCount = $event"/>
+                                @update:model-value="copyCount = $event"/>
                     </b-field>
                 </div>
             </section>
diff --git a/src/views/admin/components/other/item-creation-status-dialog.vue b/src/views/admin/components/other/item-creation-status-dialog.vue
index 6b14dab46..95a9101f7 100644
--- a/src/views/admin/components/other/item-creation-status-dialog.vue
+++ b/src/views/admin/components/other/item-creation-status-dialog.vue
@@ -35,7 +35,7 @@
                 <!-- Status -------------------------------- --> 
                 <div class="status-radios">
                     <b-radio
-                            v-model:value="selectedStatus"
+                            v-model="selectedStatus"
                             v-for="(statusOption, index) of availableStatus"
                             :key="index"
                             :native-value="statusOption.slug">
diff --git a/src/views/admin/components/other/processes-popup.vue b/src/views/admin/components/other/processes-popup.vue
index bda253de5..d04d07842 100644
--- a/src/views/admin/components/other/processes-popup.vue
+++ b/src/views/admin/components/other/processes-popup.vue
@@ -100,12 +100,7 @@
                         <span 
                                 v-if="bgProcess.status === 'running'"
                                 class="icon has-text-success loading-icon">
-                            <!--<progress-->
-                                    <!--:value="bgProcess.progress_value > 0 ? bgProcess.progress_value : 0"-->
-                                    <!--max="100"-->
-                                    <!--class="progress is-success is-small is-loading">-->
-                                <!--{{ `(${ bgProcess.progress_value &lt;&equals; 0 ? 0 : bgProcess.progress_value }%)` }}-->
-                            <!--</progress>-->
+
                             <div class="control has-icons-right is-loading is-clearfix" />
                         </span>
                     </div>
diff --git a/src/views/admin/components/other/term-deletion-dialog.vue b/src/views/admin/components/other/term-deletion-dialog.vue
index ae233df59..91d8382d9 100644
--- a/src/views/admin/components/other/term-deletion-dialog.vue
+++ b/src/views/admin/components/other/term-deletion-dialog.vue
@@ -33,12 +33,12 @@
                         class="type-of-deletion-options">
                     <b-radio 
                             native-value="selected"
-                            v-model:value="typeOfDelete">
+                            v-model="typeOfDelete">
                         {{ amountOfTerms > 1 ? $i18n.get('label_remove_selected_terms') : $i18n.get('label_remove_selected_term') }}
                     </b-radio>
                     <b-radio 
                             native-value="descendants"
-                            v-model:value="typeOfDelete">
+                            v-model="typeOfDelete">
                         {{ amountOfTerms > 1 ? $i18n.get('label_remove_terms_and_descendants') : $i18n.get('label_remove_term_and_descendants') }}
                     </b-radio>
                 </div>
diff --git a/src/views/admin/components/other/term-multiple-insertion-dialog.vue b/src/views/admin/components/other/term-multiple-insertion-dialog.vue
index a345ed497..c09db9274 100644
--- a/src/views/admin/components/other/term-multiple-insertion-dialog.vue
+++ b/src/views/admin/components/other/term-multiple-insertion-dialog.vue
@@ -37,7 +37,7 @@
                         </label>
 
                     <b-taginput
-                            v-model:value="termNames"
+                            v-model="termNames"
                             attached
                             :confirm-keys="termNamesSeparator"
                             :on-paste-separators="termNamesSeparator"
@@ -52,7 +52,7 @@
                                 v-for="separator of ['Enter', ',', ';', '|']"
                                 :key="separator"
                                 name="term-multiple-insertion-separator"
-                                v-model:value="termNamesSeparator"
+                                v-model="termNamesSeparator"
                                 :native-value="separator"
                                 :disabled="separator == 'Enter'">
                             <kbd>{{ separator }}</kbd>
@@ -66,12 +66,12 @@
                         class="parent-term-options">
                     <b-radio 
                             :native-value="false"
-                            v-model:value="hasParent">
+                            v-model="hasParent">
                         {{ $i18n.get('label_no_parent_root_term') }}
                     </b-radio>
                     <b-radio 
                             :native-value="true"
-                            v-model:value="hasParent">
+                            v-model="hasParent">
                         {{ $i18n.get('instruction_select_a_parent_term') }}
                     </b-radio>
                     <b-autocomplete
@@ -81,10 +81,10 @@
                             :data="parentTerms"
                             field="name"
                             clearable
-                            v-model:value="parentTermName"
+                            v-model="parentTermName"
                             @select="onSelectParentTerm($event)"
                             :loading="isFetchingParentTerms"
-                            @input="fetchParentTerms"
+                            @update:model-value="fetchParentTerms"
                             check-infinite-scroll
                             :append-to-body="true"
                             @infinite-scroll="fetchMoreParentTerms">
diff --git a/src/views/admin/components/other/term-parent-selection-dialog.vue b/src/views/admin/components/other/term-parent-selection-dialog.vue
index 793e1ef94..6aefa66df 100644
--- a/src/views/admin/components/other/term-parent-selection-dialog.vue
+++ b/src/views/admin/components/other/term-parent-selection-dialog.vue
@@ -33,12 +33,12 @@
                 <div class="parent-term-options">
                     <b-radio 
                             :native-value="false"
-                            v-model:value="hasParent">
+                            v-model="hasParent">
                         {{ $i18n.get('label_no_parent_root_term') }}
                     </b-radio>
                     <b-radio 
                             :native-value="true"
-                            v-model:value="hasParent">
+                            v-model="hasParent">
                         {{ $i18n.get('instruction_select_a_parent_term') }}
                     </b-radio>
                     <b-autocomplete
@@ -47,10 +47,10 @@
                             :data="parentTerms"
                             field="name"
                             clearable
-                            v-model:value="parentTermName"
+                            v-model="parentTermName"
                             @select="onSelectParentTerm($event)"
                             :loading="isFetchingParentTerms"
-                            @input="fetchParentTerms"
+                            @update:model-value="fetchParentTerms"
                             :disabled="!hasParent"
                             check-infinite-scroll
                             :append-to-body="true"
diff --git a/src/views/admin/components/search/advanced-search.vue b/src/views/admin/components/search/advanced-search.vue
index 3a3c92226..c425e3e2f 100644
--- a/src/views/admin/components/search/advanced-search.vue
+++ b/src/views/admin/components/search/advanced-search.vue
@@ -18,8 +18,8 @@
                             :placeholder="$i18n.get('instruction_select_a_metadatum')"
                             :aria-label="$i18n.get('instruction_select_a_metadatum')"
                             :disabled="advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index]"
-                            :value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null"
-                            @input="addMetadatumToAdvancedSearchQuery(
+                            :model-value="(advancedSearchQuery[searchCriterion.type] && advancedSearchQuery[searchCriterion.type][searchCriterion.index] ) ? advancedSearchQuery[searchCriterion.type][searchCriterion.index].key : null"
+                            @update:model-value="addMetadatumToAdvancedSearchQuery(
                                 { 
                                     metadatumId: $event,
                                     type: (metadataAsObject[$event] && metadataAsObject[$event].metadata_type_object) ? metadataAsObject[$event].metadata_type_object.primitive_type : '',
@@ -67,8 +67,8 @@
                     <b-select
                             :loading="isLoadingMetadata"
                             v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]"
-                            @input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
-                            :value="advancedSearchQuery.metaquery[searchCriterion.index].compare"
+                            @update:model-value="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
+                            :model-value="advancedSearchQuery.metaquery[searchCriterion.index].compare"
                             :placeholder="$i18n.get('label_criterion_to_compare')"
                             :aria-label="$i18n.get('label_criterion_to_compare')">
                         <option 
@@ -80,8 +80,8 @@
                     <b-select
                             :loading="isLoadingMetadata"
                             v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
-                            @input="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
-                            :value="advancedSearchQuery.taxquery[searchCriterion.index].operator"
+                            @update:model-value="addComparatorToAdvancedSearchQuery($event, searchCriterion)"
+                            :model-value="advancedSearchQuery.taxquery[searchCriterion.index].operator"
                             :placeholder="$i18n.get('label_criterion_to_compare')"
                             :aria-label="$i18n.get('label_criterion_to_compare')">
                         <option 
@@ -104,8 +104,8 @@
                                 v-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float'"
                                 type="number"
                                 step="any"
-                                @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
-                                :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
+                                @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                                :model-value="advancedSearchQuery.metaquery[searchCriterion.index].value"
                                 :placeholder="$i18n.get('label_number_to_search_for')"
                                 :aria-label="$i18n.get('label_number_to_search_for')"
                         />
@@ -121,16 +121,16 @@
                         <b-input
                                 v-else
                                 type="text"
-                                @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
-                                :value="advancedSearchQuery.metaquery[searchCriterion.index].value"
+                                @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                                :model-value="advancedSearchQuery.metaquery[searchCriterion.index].value"
                                 :placeholder="$i18n.get('label_string_to_search_for')"
                                 :aria-label="$i18n.get('label_string_to_search_for')"
                         />
                     </template>
                     <b-input
                             v-else-if="searchCriterion.type == 'taxquery' && advancedSearchQuery.taxquery[searchCriterion.index]"
-                            :value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
-                            @input="addValueToAdvancedSearchQuery($event, searchCriterion)"
+                            :model-value="advancedSearchQuery.taxquery[searchCriterion.index].terms"
+                            @update:model-value="addValueToAdvancedSearchQuery($event, searchCriterion)"
                             type="text"
                             :placeholder="$i18n.get('label_string_to_search_for')"
                             :aria-label="$i18n.get('label_string_to_search_for')" />
@@ -212,7 +212,7 @@
 
         <b-loading 
                 :is-full-page="false" 
-                v-model:active="isLoadingMetadata" />
+                v-model="isLoadingMetadata" />
         
         <section
                 v-if="!isLoadingMetadata && metadataAsArray && metadataAsArray.length <= 0"
@@ -625,7 +625,7 @@
                 }
 
                 this.hasUpdatedSearch = false;
-                this.$eventBusSearch.$emit('performAdvancedSearch', this.advancedSearchQuery);
+                this.$eventBusSearchEmitter.emit('performAdvancedSearch', this.advancedSearchQuery);
             },
             getAdvancedSearchQueryCriterionMetadataType(searchCriterion) {
                 if (this.advancedSearchQuery.metaquery[searchCriterion] &&
diff --git a/src/views/admin/components/search/filters-items-list.vue b/src/views/admin/components/search/filters-items-list.vue
index 00562e508..a59a9aed3 100644
--- a/src/views/admin/components/search/filters-items-list.vue
+++ b/src/views/admin/components/search/filters-items-list.vue
@@ -5,7 +5,7 @@
 
         <b-loading
                 :is-full-page="false"
-                v-model:active="isLoadingFilters"/>
+                v-model="isLoadingFilters"/>
 
         <h3 
                 id="filters-label-landmark"
@@ -398,7 +398,7 @@
             this.prepareFilters();
 
             if (this.isUsingElasticSearch)
-                this.$eventBusSearch.$emitter.on('isLoadingItems', this.updateIsLoadingItems);
+                this.$eventBusSearchEmitter.on('isLoadingItems', this.updateIsLoadingItems);
         },
         beforeUnmount() {
             // Cancels previous collection name Request
@@ -414,7 +414,7 @@
                 this.filtersSearchCancel.cancel('Filters search Canceled.');
 
             if (this.isUsingElasticSearch)
-                this.$eventBusSearch.$emitter.off('isLoadingItems', this.updateIsLoadingItems);
+                this.$eventBusSearchEmitter.off('isLoadingItems', this.updateIsLoadingItems);
      
         },
         methods: {
diff --git a/src/views/admin/components/search/filters-tags-list.vue b/src/views/admin/components/search/filters-tags-list.vue
index b2d0fb950..cb0bb8066 100644
--- a/src/views/admin/components/search/filters-tags-list.vue
+++ b/src/views/admin/components/search/filters-tags-list.vue
@@ -45,8 +45,7 @@
                 </ul>
                 <button 
                         class="swiper-button-prev" 
-                        id="tainacan-filter-tags-prev" 
-                        slot="button-prev">
+                        id="tainacan-filter-tags-prev">
                     <svg
                             width="24"
                             height="24"
@@ -59,8 +58,7 @@
                 </button>
                 <button 
                         class="swiper-button-next" 
-                        id="tainacan-filter-tags-next" 
-                        slot="button-next">
+                        id="tainacan-filter-tags-next">
                     <svg
                             width="24"
                             height="24"
diff --git a/src/views/admin/components/search/pagination.vue b/src/views/admin/components/search/pagination.vue
index 3a29f1ded..d4c947154 100644
--- a/src/views/admin/components/search/pagination.vue
+++ b/src/views/admin/components/search/pagination.vue
@@ -38,10 +38,10 @@
                     horizontal 
                     :label="$i18n.get('label_items_per_page')"> 
                 <b-select 
-                        :value="itemsPerPage"
+                        :model-value="itemsPerPage"
                         aria-controls="items-list-results"
                         aria-labelledby="items-per-page-select"
-                        @input="onChangeItemsPerPage">
+                        @update:model-value="onChangeItemsPerPage">
                     <template 
                             v-for="(itemsPerPageOption, index) of itemsPerPageOptions"
                             :key="index">
@@ -67,15 +67,16 @@
                         @change="onPageChange"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            aria-labelledby="go-to-page-dropdown"
-                            class="button is-white"
-                            slot="trigger">
-                        <span>{{ page }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                aria-labelledby="go-to-page-dropdown"
+                                class="button is-white">
+                            <span>{{ page }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item
                             aria-controls="items-list-results"
                             role="button" 
@@ -94,7 +95,7 @@
                     aria-controls="items-list-results"
                     @change="onPageChange"
                     :total="totalItems"
-                    v-model:current="page"
+                    v-model="page"
                     order="is-centered"
                     size="is-small"
                     :per-page="itemsPerPage"
diff --git a/src/views/admin/js/admin-main.js b/src/views/admin/js/admin-main.js
index 1d3f0b9bf..973663f34 100644
--- a/src/views/admin/js/admin-main.js
+++ b/src/views/admin/js/admin-main.js
@@ -30,7 +30,6 @@ import {
     Numberinput
 } from '@ntohq/buefy-next';
 import VTooltip from 'floating-vue';
-import draggable from 'vuedraggable';
 import VueTheMask from 'vue-the-mask';
 import cssVars from 'css-vars-ponyfill';
 import VueBlurHash from 'another-vue3-blurhash';
@@ -72,7 +71,6 @@ import TainacanTitle from '../components/navigation/tainacan-title.vue';
 import store from './store/store';
 import router from './router';
 import eventBusSearch from './event-bus-search';
-import eventBusMetadataList from './event-bus-metadata-list.js';
 import { 
     I18NPlugin,
     UserPrefsPlugin,
@@ -89,6 +87,14 @@ import {
 } from './utilities';
 import mitt from 'mitt';
 
+import { configureCompat } from 'vue'
+
+// Desabilita a compatibilidade Vue2 para certos recursos já tratados no código
+configureCompat({
+    COMPONENT_V_MODEL: false
+})
+
+
 export default (element) => {
 
     function renderTainacanAdminPage() {
@@ -101,8 +107,6 @@ export default (element) => {
 
             const app = createApp({
                 el: '#tainacan-admin-app',
-                router,
-                store,
                 render: () => h(AdminPage)
             });
             
@@ -112,6 +116,9 @@ export default (element) => {
             const emitter = mitt();
             app.config.globalProperties.$emitter = emitter;
 
+            const eventBusMetadataList = mitt();
+            app.config.globalProperties.$eventBusMetadataList = emitter;
+
             /* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins  */
             if (typeof window.tainacan_extra_plugins != "undefined") {
                 for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins))
@@ -232,7 +239,6 @@ export default (element) => {
 
             /* Others */
             app.component('help-button', HelpButton);
-            app.component('draggable', draggable);
             app.component('tainacan-title', TainacanTitle);
 
             // Event bus are needed to facilate comunication between child-parent-child components
diff --git a/src/views/admin/js/event-bus-item-metadata.js b/src/views/admin/js/event-bus-item-metadata.js
index 308fb7a47..aaa4a05af 100644
--- a/src/views/admin/js/event-bus-item-metadata.js
+++ b/src/views/admin/js/event-bus-item-metadata.js
@@ -5,7 +5,6 @@ import mitt from 'mitt';
 const emitter = mitt();
 
 export const eventBusItemMetadata = createApp({
-    store,
     data: {
         errors : [],
         conditionalSections: {}
@@ -159,4 +158,5 @@ export const eventBusItemMetadata = createApp({
         }
     }
 });
-eventBusItemMetadata.config.globalProperties.$emitter = emitter;
\ No newline at end of file
+eventBusItemMetadata.config.globalProperties.$emitter = emitter;
+eventBusItemMetadata.use(store);
\ No newline at end of file
diff --git a/src/views/admin/js/event-bus-metadata-list.js b/src/views/admin/js/event-bus-metadata-list.js
deleted file mode 100644
index 6ca1dddb5..000000000
--- a/src/views/admin/js/event-bus-metadata-list.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createApp } from 'vue';
-import mitt from 'mitt';
-
-const emitter = mitt();
-
-export default {
-
-    install(app, options = {}) {
-        app.config.globalProperties.$emitter = emitter;
-        app.config.globalProperties.$eventBusMetadataList = createApp({
-            emits: [
-                'addMetadatumViaButton',
-                'addMetadataSectionViaButton'
-            ],
-            methods: {
-                onAddMetadatumViaButton(metadataType) {
-                    this.$emit('addMetadatumViaButton', metadataType);
-                },
-                onAddMetadataSectionViaButton() {
-                    this.$emit('addMetadataSectionViaButton');
-                }
-            }
-        });
-    }
-}
\ No newline at end of file
diff --git a/src/views/admin/js/event-bus-search.js b/src/views/admin/js/event-bus-search.js
index c67c4ad87..713982f2b 100644
--- a/src/views/admin/js/event-bus-search.js
+++ b/src/views/admin/js/event-bus-search.js
@@ -1,4 +1,3 @@
-import { createApp } from 'vue';
 import mitt from 'mitt';
 
 const emitter = mitt();
@@ -6,439 +5,283 @@ const emitter = mitt();
 export default {
 
     install(app, options = {}) {
-        app.config.globalProperties.$emitter = emitter;
+
         app.config.globalProperties.$eventBusSearch = {
-            router: options.router,
-            store: options.store,
-            data: {
-                errors : [],
-                query: {},
-                collectionId: undefined,
-                defaultOrder: 'ASC',
-                defaultOrderBy: 'date',
-                taxonomy: undefined,
-                termId: undefined,
-                searchCancel: undefined
+            $store: app.config.globalProperties.$store,
+            $router: app.config.globalProperties.$router,
+            $route: app.config.globalProperties.$route,
+            errors : [],
+            query: {},
+            collectionId: undefined,
+            defaultOrder: 'ASC',
+            defaultOrderBy: 'date',
+            taxonomy: undefined,
+            termId: undefined,
+            searchCancel: undefined,
+            performAdvancedSearch(data) {
+                this.$store.dispatch('search/set_advanced_query', data);
+                this.updateURLQueries();
             },
-            emits: [
-                'input',
-                'startSlideshowFromItem',
-                'hasToReloadFacets',
-                'isLoadingItems',
-                'hasFiltered',
-                'closeAdvancedSearch'
-            ],
-            created() {
-                this.$emitter.on('input', data => {
-                    if (data.taxonomy)
-                        this.addTaxquery(data);
-                    else
-                        this.addMetaquery(data);
-                });
-
-                this.$root.$emitter.on('closeAdvancedSearch', () => {
-                    this.$store.dispatch('search/setPage', 1);
-                    
-                    this.performAdvancedSearch({});
-                });
-
-                this.$root.$emitter.on('performAdvancedSearch', advancedSearchQuery => {
-                    this.$store.dispatch('search/setPage', 1);
-                    this.performAdvancedSearch(advancedSearchQuery);
-
-                    this.updateURLQueries();
-                });
+            addMetaquery( data ){
+                if ( data && data.collection_id ){
+                    this.$store.dispatch('search/add_metaquery', data );
+                }
+                this.updateURLQueries();
             },
-            watch: {
-                '$route': {
-                    handler(to, from) {
+            addTaxquery( data ){
+                if ( data && data.collection_id ){
+                    this.$store.dispatch('search/add_taxquery', data );
+                }
+                this.updateURLQueries();
+            },
+            removeMetaFromFilterTag(filterTag) {
+
+                if (filterTag.singleLabel != undefined || filterTag.label != undefined) {
                     
-                        // Should set Collection ID from URL only when in admin.
-                        if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
-                            this.collectionId = !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId);
-
-                        // Fills the URL with appropriate default values in case a query is not passed
-                        if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
-                            
-                            // Items Per Page
-                            if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) {
-                                let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page');
-                                let perPageValue = this.$userPrefs.get(perPageKey);
-
-                                if (perPageValue)
-                                    this.$route.query.perpage = perPageValue;
-                                else {
-                                    this.$route.query.perpage = 12;
-                                    this.$userPrefs.set(perPageKey, 12);
-                                }
-                            }    
-                            
-                            // Page
-                            if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
-                                this.$route.query.paged = 1;
-                            
-                            // Order (ASC, DESC)
-                            if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
-                                let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
-                                let orderValue = this.$userPrefs.get(orderKey) ? this.$userPrefs.get(orderKey) : this.defaultOrder;
-                                
-                                if (orderValue)
-                                    this.$route.query.order = orderValue;
-                                else {
-                                    this.$route.query.order = 'DESC';
-                                    this.$userPrefs.set(orderKey, 'DESC');
-                                }
-                            }
-                            
-                            // Order By (required extra work to deal with custom metadata ordering)
-                            if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
-                                let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
-                                let orderBy = this.$userPrefs.get(orderByKey) ? this.$userPrefs.get(orderByKey) : this.defaultOrderBy;
-                            
-                                if (orderBy && orderBy != 'name') {
-                                
-                                    // Previously was stored as a metadata object, now it is a orderby object
-                                    if (orderBy.slug || typeof orderBy == 'string')
-                                        orderBy = this.$orderByHelper.getOrderByForMetadatum(orderBy);
-
-                                    if (orderBy.orderby)
-                                        Object.keys(orderBy).forEach((paramKey) => {
-                                            this.$route.query[paramKey] = orderBy[paramKey];
-                                        });
-                                    else
-                                        this.$route.query.orderby = 'date'
-                                    
-                                } else {
-                                    this.$route.query.orderby = 'date';
-                                    this.$userPrefs.set(orderByKey, { 
-                                        slug: 'creation_date',
-                                        name: this.$i18n.get('label_creation_date')
-                                    }).catch(() => { });
-                                }
-                            } else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
-                                this.$route.query.orderby = 'date'
-                            }
-
-                            // Theme View Modes
-                            if ((this.$route.name == null || this.$route.name == undefined ) && 
-                                this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
-                                (this.$route.query.view_mode == undefined || to.params.collectionId != from.params.collectionId)
-                            ) {
-                                
-                                let viewModeKey = (this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode');
-                                let viewModeValue = this.$userPrefs.get(viewModeKey);
-
-                                if (viewModeValue)
-                                    this.$route.query.view_mode = viewModeValue;
-                                else {
-                                    this.$route.query.view_mode = 'table';
-                                    this.$userPrefs.set(viewModeKey, 'table');
-                                }
-                            }
-
-                            // Emit slideshow-from to start this view mode from index
-                            if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
-                                this.$emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
-
-                            // Admin View Modes
-                            if (this.$route.name != null && this.$route.name != undefined  && 
-                                (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
-                                (this.$route.query.admin_view_mode == undefined || to.params.collectionId != from.params.collectionId)
-                            ) {
-                                let adminViewModeKey = (this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode');
-                                let adminViewModeValue = this.$userPrefs.get(adminViewModeKey);
-
-                                if (adminViewModeValue)
-                                    this.$route.query.admin_view_mode = adminViewModeValue;
-                                else {
-                                    this.$route.query.admin_view_mode = 'table';
-                                    this.$userPrefs.set(adminViewModeKey, 'table');
-                                }
-                            }
-                            
-                            // Advanced Search
-                            if (this.$route.query && this.$route.query.advancedSearch){
-                                this.$store.dispatch('search/set_advanced_query', this.$route.query);
-                            } else {
-                                this.$store.dispatch('search/set_postquery', this.$route.query);
-                            }
-                            
-                            // Checks current metaqueries and taxqueries to alert filters that should reload
-                            // For some reason, this process is not working accessing to.query, so we need to check the path string. 
-                            const oldQueryString = from.fullPath.replace(from.path + '?', '');
-                            const newQueryString = to.fullPath.replace(from.path + '?', '');
-                            
-                            const oldQueryArray = oldQueryString.split('&');
-                            const newQueryArray = newQueryString.split('&');
-
-                            const oldMetaQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
-                            const newMetaQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
-                            const oldTaxQueryArray  = oldQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
-                            const newTaxQueryArray  = newQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
-                            const oldStatusArray    = oldQueryArray.filter(queryItem => queryItem.startsWith('status'));
-                            const newStatusArray    = newQueryArray.filter(queryItem => queryItem.startsWith('status'));
-                            const oldSearchQuery    = oldQueryArray.filter(queryItem => queryItem.startsWith('search'));
-                            const newSearchQuery    = newQueryArray.filter(queryItem => queryItem.startsWith('search'));
-
-                            if (
-                                JSON.stringify(oldMetaQueryArray) != JSON.stringify(newMetaQueryArray) ||
-                                JSON.stringify(oldTaxQueryArray)  != JSON.stringify(newTaxQueryArray) ||
-                                JSON.stringify(oldStatusArray)    != JSON.stringify(newStatusArray) ||
-                                JSON.stringify(oldSearchQuery)    != JSON.stringify(newSearchQuery)
-                            ) {
-                                this.$emit('hasToReloadFacets', true);
-                            }
-                            
-                            // Finally, loads items
-                            if (to.fullPath != from.fullPath)
-                                this.loadItems();
+                    if (filterTag.argType !== 'postin') {
+                        if (filterTag.taxonomy) {
+                            this.$store.dispatch('search/remove_taxquery', {
+                                filterId: filterTag.filterId,
+                                label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
+                                isMultiValue: filterTag.singleLabel ? false : true,
+                                taxonomy: filterTag.taxonomy,
+                                value: filterTag.value
+                            });
+                        } else {
+                            this.$store.dispatch('search/remove_metaquery', {
+                                filterId: filterTag.filterId,
+                                label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
+                                isMultiValue: filterTag.singleLabel ? false : true,
+                                metadatum_id: filterTag.metadatumId,
+                                value: filterTag.value
+                            });
                         }
-                    },
-                    deep: true
+                    } else {
+                        this.$store.dispatch('search/remove_postin');
+                    }
+                    this.$store.dispatch('search/removeFilterTag', filterTag);
+                }
+                this.updateURLQueries();
+            },
+            addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) {
+                this.$store.dispatch('search/add_fetch_only', metadatum );
+                this.$store.dispatch('search/add_fetch_only_meta', metadatumIDs);
+                this.updateURLQueries();  
+                
+                if (!ignorePrefs) {
+                    let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only';
+                    let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta';
+
+                    if (this.$userPrefs.get(prefsFetchOnly) != metadatum)
+                        this.$userPrefs.set(prefsFetchOnly, metadatum);
+
+                    if (this.$userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs)
+                        this.$userPrefs.set(prefsFetchOnlyMeta, metadatumIDs);
                 }
             },
-            methods: {
-                performAdvancedSearch(data) {
-                    this.$store.dispatch('search/set_advanced_query', data);
-                    this.updateURLQueries();
-                },
-                addMetaquery( data ){
-                    if ( data && data.collection_id ){
-                        this.$store.dispatch('search/add_metaquery', data );
-                    }
-                    this.updateURLQueries();
-                },
-                addTaxquery( data ){
-                    if ( data && data.collection_id ){
-                        this.$store.dispatch('search/add_taxquery', data );
-                    }
-                    this.updateURLQueries();
-                },
-                removeMetaFromFilterTag(filterTag) {
+            cleanFetchOnly() {
+                this.$store.dispatch('search/cleanFetchOnly');
+            },
+            removeFetchOnlyMeta( metadatum ){
+                this.$store.dispatch('search/remove_fetch_only_meta', metadatum );
+                this.updateURLQueries();             
+            },
+            setPage(page) {
+                this.$store.dispatch('search/setPage', page);
+                this.updateURLQueries();
+            },
+            resetPageOnStore() {
+                this.$store.dispatch('search/setPage', 1);
+            },
+            setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) {
+                this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
+                this.updateURLQueries();
 
-                    if (filterTag.singleLabel != undefined || filterTag.label != undefined) {
-                        
-                        if (filterTag.argType !== 'postin') {
-                            if (filterTag.taxonomy) {
-                                this.$store.dispatch('search/remove_taxquery', {
-                                    filterId: filterTag.filterId,
-                                    label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
-                                    isMultiValue: filterTag.singleLabel ? false : true,
-                                    taxonomy: filterTag.taxonomy,
-                                    value: filterTag.value
-                                });
-                            } else {
-                                this.$store.dispatch('search/remove_metaquery', {
-                                    filterId: filterTag.filterId,
-                                    label: filterTag.singleLabel ? filterTag.singleLabel : filterTag.label,
-                                    isMultiValue: filterTag.singleLabel ? false : true,
-                                    metadatum_id: filterTag.metadatumId,
-                                    value: filterTag.value
-                                });
-                            }
-                        } else {
-                            this.$store.dispatch('search/remove_postin');
-                        }
-                        this.$store.dispatch('search/removeFilterTag', filterTag);
-                    }
-                    this.updateURLQueries();
-                },
-                addFetchOnly( metadatum, ignorePrefs, metadatumIDs ) {
-                    this.$store.dispatch('search/add_fetch_only', metadatum );
-                    this.$store.dispatch('search/add_fetch_only_meta', metadatumIDs);
-                    this.updateURLQueries();  
-                    
-                    if (!ignorePrefs) {
-                        let prefsFetchOnly = this.collectionId ? `fetch_only_${this.collectionId}` : 'fetch_only';
-                        let prefsFetchOnlyMeta = this.collectionId ? `fetch_only_meta_${this.collectionId}` : 'fetch_only_meta';
-
-                        if (this.$userPrefs.get(prefsFetchOnly) != metadatum)
-                            this.$userPrefs.set(prefsFetchOnly, metadatum);
-
-                        if (this.$userPrefs.get(prefsFetchOnlyMeta) != metadatumIDs)
-                            this.$userPrefs.set(prefsFetchOnlyMeta, metadatumIDs);
-                    }
-                },
-                cleanFetchOnly() {
-                    this.$store.dispatch('search/cleanFetchOnly');
-                },
-                removeFetchOnlyMeta( metadatum ){
-                    this.$store.dispatch('search/remove_fetch_only_meta', metadatum );
-                    this.updateURLQueries();             
-                },
-                setPage(page) {
-                    this.$store.dispatch('search/setPage', page);
-                    this.updateURLQueries();
-                },
-                resetPageOnStore() {
-                    this.$store.dispatch('search/setPage', 1);
-                },
-                setItemsPerPage(itemsPerPage, shouldNotUpdatePrefs) {
-                    this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
-                    this.updateURLQueries();
-
-                    if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) {
-                        let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page';
-                        if (this.$userPrefs.get(prefsPerPage) != itemsPerPage) {
-                            this.$userPrefs.set(prefsPerPage, itemsPerPage)
-                                .catch(() => {});
-                        }
-                    }
-                },
-                setOrderBy(orderBy) { 
-                    let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by';
-
-                    if (orderBy.metakey) {
-                        if (!this.$userPrefs.get(prefsOrderBy) || orderBy.metakey != this.$userPrefs.get(prefsOrderBy).metakey)
-                            this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
-                    } else {
-                        if (orderBy != this.$userPrefs.get(prefsOrderBy))
-                            this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
-                    }
-                    
-                    this.$store.dispatch('search/setOrderBy', orderBy);
-                    this.updateURLQueries();
-                },
-                setOrder(order) {
-                    let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order';
-                    if (this.$userPrefs.get(prefsOrder) != order) {
-                        this.$userPrefs.set(prefsOrder, order)
+                if (shouldNotUpdatePrefs == undefined || shouldNotUpdatePrefs == false) {
+                    let prefsPerPage = this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page';
+                    if (this.$userPrefs.get(prefsPerPage) != itemsPerPage) {
+                        this.$userPrefs.set(prefsPerPage, itemsPerPage)
                             .catch(() => {});
                     }
+                }
+            },
+            setOrderBy(orderBy) { 
+                let prefsOrderBy = this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by';
 
-                    this.$store.dispatch('search/setOrder', order);
-                    this.updateURLQueries();
-                },
-                setStatus(status) {
-                    this.$store.dispatch('search/setStatus', status);
-                    this.updateURLQueries();
-                },
-                setTotalItems(totalItems) {
-                    this.$store.dispatch('search/setTotalItems', totalItems);
-                },
-                setSentenceMode(sentenceMode) {
-                    this.$store.dispatch('search/setSentenceMode', sentenceMode);
-                },
-                setSearchQuery(searchQuery) {
-                    this.$store.dispatch('search/setSearchQuery', searchQuery);
-                    this.updateURLQueries();
-                },
-                setViewMode(viewMode) {
-                    this.$store.dispatch('search/setViewMode', viewMode);
-                    this.updateURLQueries(); 
-                    
-                    let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode';
-                    if(this.$userPrefs.get(prefsViewMode) != viewMode) {
-                        this.$userPrefs.set(prefsViewMode, viewMode)
-                            .catch(() => {});
-                    }
-                },
-                setAdminViewMode(adminViewMode) {
-                    this.$store.dispatch('search/setAdminViewMode', adminViewMode);
-                    this.updateURLQueries();  
+                if (orderBy.metakey) {
+                    if (!this.$userPrefs.get(prefsOrderBy) || orderBy.metakey != this.$userPrefs.get(prefsOrderBy).metakey)
+                        this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
+                } else {
+                    if (orderBy != this.$userPrefs.get(prefsOrderBy))
+                        this.$userPrefs.set(prefsOrderBy, orderBy).catch(() => {});
+                }
+                
+                this.$store.dispatch('search/setOrderBy', orderBy);
+                this.updateURLQueries();
+            },
+            setOrder(order) {
+                let prefsOrder = this.collectionId != undefined ? 'order_' + this.collectionId : 'order';
+                if (this.$userPrefs.get(prefsOrder) != order) {
+                    this.$userPrefs.set(prefsOrder, order)
+                        .catch(() => {});
+                }
 
-                    let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
-                    if (this.$userPrefs.get(prefsAdminViewMode) != adminViewMode) {
-                        this.$userPrefs.set(prefsAdminViewMode, adminViewMode)
-                            .catch(() => {  });
-                    }
-                },
-                setInitialViewMode(viewMode) {
-                    this.$store.dispatch('search/setViewMode', viewMode);
-                    this.updateURLQueries(); 
-                },
-                setInitialAdminViewMode(adminViewMode) { 
-                    this.$store.dispatch('search/setAdminViewMode', adminViewMode);
-                    this.updateURLQueries();  
-                },
-                setSelectedItemsForIframe(selectedItems, singleSelection) {
- 
-                    if (singleSelection)
-                        this.$store.dispatch('search/cleanSelectedItems');
+                this.$store.dispatch('search/setOrder', order);
+                this.updateURLQueries();
+            },
+            setStatus(status) {
+                this.$store.dispatch('search/setStatus', status);
+                this.updateURLQueries();
+            },
+            setTotalItems(totalItems) {
+                this.$store.dispatch('search/setTotalItems', totalItems);
+            },
+            setSentenceMode(sentenceMode) {
+                this.$store.dispatch('search/setSentenceMode', sentenceMode);
+            },
+            setSearchQuery(searchQuery) {
+                this.$store.dispatch('search/setSearchQuery', searchQuery);
+                this.updateURLQueries();
+            },
+            setViewMode(viewMode) {
+                this.$store.dispatch('search/setViewMode', viewMode);
+                this.updateURLQueries(); 
+                
+                let prefsViewMode = this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode';
+                if(this.$userPrefs.get(prefsViewMode) != viewMode) {
+                    this.$userPrefs.set(prefsViewMode, viewMode)
+                        .catch(() => {});
+                }
+            },
+            setAdminViewMode(adminViewMode) {
+                this.$store.dispatch('search/setAdminViewMode', adminViewMode);
+                this.updateURLQueries();  
 
-                    this.$store.dispatch('search/setSelectedItems', selectedItems);
- 
-                    let currentSelectedItems = this.$store.getters['search/getSelectedItems'];
+                let prefsAdminViewMode = this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode';
+                if (this.$userPrefs.get(prefsAdminViewMode) != adminViewMode) {
+                    this.$userPrefs.set(prefsAdminViewMode, adminViewMode)
+                        .catch(() => {  });
+                }
+            },
+            setInitialViewMode(viewMode) {
+                this.$store.dispatch('search/setViewMode', viewMode);
+                this.updateURLQueries(); 
+            },
+            setInitialAdminViewMode(adminViewMode) { 
+                this.$store.dispatch('search/setAdminViewMode', adminViewMode);
+                this.updateURLQueries();  
+            },
+            setSelectedItemsForIframe(selectedItems, singleSelection) {
 
-                    if (window.history.pushState) {
-                        let searchParams = new URLSearchParams(window.location.search);
-                        searchParams.delete('selecteditems');
-                        for (let selectedItem of currentSelectedItems)
-                            searchParams.append('selecteditems', selectedItem);
-
-                        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
-                        window.history.pushState({path: newurl}, '', newurl);
-                    }      
-                },
-                cleanSelectedItems() {
+                if (singleSelection)
                     this.$store.dispatch('search/cleanSelectedItems');
-                },
-                filterBySelectedItems(selectedItems) {
-                    this.$router.replace({ query: {} });
-                    this.$router.replace({ query: { postin: selectedItems } });
-                },
-                highlightsItem(itemId) {
-                    this.$store.dispatch('search/highlightsItem', itemId);
-                    this.updateURLQueries();
-                },
-                updateURLQueries() {
-                    this.$router.replace({ query: {} });
-                    this.$router.replace({ query: this.$store.getters['search/getPostQuery'] });
-                },
-                updateStoreFromURL() {
-                    this.$store.dispatch('search/set_postquery', this.$route.query);
-                },
-                loadItems() {
 
-                    // Forces fetch_only to be filled before any search happens
-                    if (this.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {  
+                this.$store.dispatch('search/setSelectedItems', selectedItems);
 
-                        this.$emit( 'isLoadingItems', true);
-                        // Cancels previous Request
-                        if (this.searchCancel != undefined)
-                            this.searchCancel.cancel('Item search Canceled.');
-                        this.$store.dispatch('collection/fetchItems', {
-                            'collectionId': this.collectionId,
-                            'isOnTheme': (this.$route.name == null),
-                            'termId': this.termId,
-                            'taxonomy': this.taxonomy
-                        }).then((resp) => {
-                            // The actual fetch item request
-                            resp.request.then((res) => {
-                                this.$emit( 'isLoadingItems', false);
-                                this.$emit( 'hasFiltered', res.hasFiltered);
-                            })
-                            .catch(() => {
-                                this.$emit( 'isLoadingItems', false);
-                            });
+                let currentSelectedItems = this.$store.getters['search/getSelectedItems'];
 
-                            // Search Request Token for cancelling
-                            this.searchCancel = resp.source;
+                if (window.history.pushState) {
+                    let searchParams = new URLSearchParams(window.location.search);
+                    searchParams.delete('selecteditems');
+                    for (let selectedItem of currentSelectedItems)
+                        searchParams.append('selecteditems', selectedItem);
+
+                    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString() + window.location.hash;
+                    window.history.pushState({path: newurl}, '', newurl);
+                }      
+            },
+            cleanSelectedItems() {
+                this.$store.dispatch('search/cleanSelectedItems');
+            },
+            filterBySelectedItems(selectedItems) {
+                this.$router.replace({ query: {} });
+                this.$router.replace({ query: { postin: selectedItems } });
+            },
+            highlightsItem(itemId) {
+                this.$store.dispatch('search/highlightsItem', itemId);
+                this.updateURLQueries();
+            },
+            updateURLQueries() {
+                this.$router.replace({ query: {} });
+                this.$router.replace({ query: this.$store.getters['search/getPostQuery'] });
+            },
+            updateStoreFromURL() {
+                this.$store.dispatch('search/set_postquery', this.$route.query);
+            },
+            loadItems() {
+
+                // Forces fetch_only to be filled before any search happens
+                if (this.$store.getters['search/getPostQuery']['fetch_only'] != undefined) {  
+
+                    this.$eventBusSearchEmitter.emit( 'isLoadingItems', true);
+                    // Cancels previous Request
+                    if (this.searchCancel != undefined)
+                        this.searchCancel.cancel('Item search Canceled.');
+
+                    this.$store.dispatch('collection/fetchItems', {
+                        'collectionId': this.collectionId,
+                        'isOnTheme': (this.$route.name == null),
+                        'termId': this.termId,
+                        'taxonomy': this.taxonomy
+                    }).then((resp) => {
+                        // The actual fetch item request
+                        resp.request.then((res) => {
+                            this.$eventBusSearchEmitter.emit( 'isLoadingItems', false);
+                            this.$eventBusSearchEmitter.emit( 'hasFiltered', res.hasFiltered);
+                        })
+                        .catch(() => {
+                            this.$eventBusSearchEmitter.emit( 'isLoadingItems', false);
                         });
 
-                    }  
-                },
-                setCollectionId(collectionId) {
-                    this.setTotalItems(null);
-                    this.collectionId = collectionId;
-                },
-                setDefaultOrder(defaultOrder) {
-                    this.defaultOrder = defaultOrder;
-                },
-                setDefaultOrderBy(defaultOrderBy) {
-                    this.defaultOrderBy = defaultOrderBy;
-                },
-                setTerm(termId, taxonomy) {
-                    this.termId = termId;
-                    this.taxonomy = taxonomy;
-                },
-                clearAllFilters() {
-                    this.$store.dispatch('search/cleanFilterTags');
-                    this.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
-                    this.$store.dispatch('search/cleanTaxQueries');
-                    this.updateURLQueries();
-                }
+                        // Search Request Token for cancelling
+                        this.searchCancel = resp.source;
+                    });
+
+                }  
+            },
+            setCollectionId(collectionId) {
+                this.setTotalItems(null);
+                this.collectionId = collectionId;
+            },
+            setDefaultOrder(defaultOrder) {
+                this.defaultOrder = defaultOrder;
+            },
+            setDefaultOrderBy(defaultOrderBy) {
+                this.defaultOrderBy = defaultOrderBy;
+            },
+            setTerm(termId, taxonomy) {
+                this.termId = termId;
+                this.taxonomy = taxonomy;
+            },
+            clearAllFilters() {
+                this.$store.dispatch('search/cleanFilterTags');
+                this.$store.dispatch('search/cleanMetaQueries', { keepCollections: true });
+                this.$store.dispatch('search/cleanTaxQueries');
+                this.updateURLQueries();
             }
-        };
+        }
+
+        // Defines the global $eventBusSearchEmitter for handling events across different search components
+        emitter.on('input', data => {
+            if (data.taxonomy)
+                $eventBusSearch.addTaxquery(data);
+            else
+                $eventBusSearch.addMetaquery(data);
+        });
+
+        emitter.on('closeAdvancedSearch', () => {
+            $eventBusSearch.$store.dispatch('search/setPage', 1);
+            
+            $eventBusSearch.performAdvancedSearch({});
+        });
+
+        emitter.on('performAdvancedSearch', advancedSearchQuery => {
+            $eventBusSearch.$store.dispatch('search/setPage', 1);
+            $eventBusSearch.performAdvancedSearch(advancedSearchQuery);
+
+            $eventBusSearch.updateURLQueries();
+        });
+
+        app.config.globalProperties.$eventBusSearchEmitter = emitter;
     }
 }
\ No newline at end of file
diff --git a/src/views/admin/pages/home-page.vue b/src/views/admin/pages/home-page.vue
index 4049a2beb..57b6b7bcd 100644
--- a/src/views/admin/pages/home-page.vue
+++ b/src/views/admin/pages/home-page.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="home-page page-container">
-        <b-loading v-model:active="isLoadingCollections"/>
+        <b-loading v-model="isLoadingCollections"/>
         <section 
                 v-if="!$adminOptions.hideHomeRepositorySection"
                 class="home-section home-section-repository">
diff --git a/src/views/admin/pages/lists/activities-page.vue b/src/views/admin/pages/lists/activities-page.vue
index c07f35c9c..75cf3ccac 100644
--- a/src/views/admin/pages/lists/activities-page.vue
+++ b/src/views/admin/pages/lists/activities-page.vue
@@ -33,7 +33,7 @@
 
                 <b-loading
                         :is-full-page="false"
-                        v-model:active="isLoading" 
+                        v-model="isLoading" 
                         :can-cancel="false"/>
 
                 <div 
@@ -44,10 +44,10 @@
                         <b-datepicker
                                 ref="datepicker"
                                 :placeholder="$i18n.get('instruction_filter_activities_date')"
-                                v-model:value="searchDates"
+                                v-model="searchDates"
                                 range
                                 :trap-focus="false"
-                                @input="searchActivities()"
+                                @update:model-value="searchActivities()"
                                 :date-formatter="(date) => dateFormatter(date)"
                                 :date-parser="(date) => dateParser(date)"
                                 icon="calendar-today"
@@ -95,7 +95,7 @@
                                 :placeholder="$i18n.get('instruction_type_search_users_filter')"
                                 keep-first
                                 open-on-focus
-                                @input="fetchUsersForFiltering"
+                                @update:model-value="fetchUsersForFiltering"
                                 @focus.once="($event) => fetchUsersForFiltering($event.target.value)"
                                 @select="filterActivitiesByUser"
                                 :loading="isFetchingUsers"
@@ -132,7 +132,7 @@
                                 size="is-small"
                                 :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
                                 autocomplete="on"
-                                v-model:value="searchQuery"
+                                v-model="searchQuery"
                                 @keyup.enter="searchActivities()"
                                 icon-right="magnify"
                                 icon-right-clickable
@@ -149,8 +149,8 @@
                             :placeholder="$i18n.get('instruction_filter_activities_date')"
                             range
                             icon="calendar-today"
-                            v-model:value="searchDates"
-                            @input="searchProcesses()"
+                            v-model="searchDates"
+                            @update:model-value="searchProcesses()"
                             :date-formatter="(date) => dateFormatter(date)"
                             :date-parser="(date) => dateParser(date)"
                             :years-range="[-50, 3]"
@@ -196,7 +196,7 @@
                             size="is-small"
                             :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
                             autocomplete="on"
-                            v-model:value="searchQuery"
+                            v-model="searchQuery"
                             @keyup.enter="searchProcesses()"
                             icon-right="magnify"
                             icon-right-clickable
@@ -265,8 +265,8 @@
                                 horizontal
                                 :label="$i18n.get('label_activities_per_page')">
                             <b-select
-                                    :value="activitiesPerPage"
-                                    @input="onChangeActivitiesPerPage"
+                                    :model-value="activitiesPerPage"
+                                    @update:model-value="onChangeActivitiesPerPage"
                                     :disabled="activities.length <= 0">
                                 <option value="12">12</option>
                                 <option value="24">24</option>
@@ -279,7 +279,7 @@
                         <b-pagination
                                 @change="onPageChange"
                                 :total="totalActivities"
-                                v-model:current="activitiesPage"
+                                v-model="activitiesPage"
                                 order="is-centered"
                                 size="is-small"
                                 :per-page="activitiesPerPage"
@@ -306,8 +306,8 @@
                                 horizontal 
                                 :label="$i18n.get('label_processes_per_page')">
                             <b-select
-                                    :value="processesPerPage"
-                                    @input="onChangeProcessesPerPage"
+                                    :model-value="processesPerPage"
+                                    @update:model-value="onChangeProcessesPerPage"
                                     :disabled="processes.length <= 0">
                                 <option value="12">12</option>
                                 <option value="24">24</option>
@@ -320,7 +320,7 @@
                         <b-pagination
                                 @change="onPageChange"
                                 :total="totalProcesses"
-                                v-model:current="processesPage"
+                                v-model="processesPage"
                                 order="is-centered"
                                 size="is-small"
                                 :per-page="processesPerPage"
diff --git a/src/views/admin/pages/lists/available-exporters-page.vue b/src/views/admin/pages/lists/available-exporters-page.vue
index 83f1cbe06..4f924302a 100644
--- a/src/views/admin/pages/lists/available-exporters-page.vue
+++ b/src/views/admin/pages/lists/available-exporters-page.vue
@@ -18,7 +18,7 @@
         </div>
 
         <b-loading
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
     </div>
 </template>
diff --git a/src/views/admin/pages/lists/available-importers-page.vue b/src/views/admin/pages/lists/available-importers-page.vue
index 8bc6c0d1e..cbe727eec 100644
--- a/src/views/admin/pages/lists/available-importers-page.vue
+++ b/src/views/admin/pages/lists/available-importers-page.vue
@@ -18,7 +18,7 @@
         </div>
         
         <b-loading 
-                v-model:active="isLoading" 
+                v-model="isLoading" 
                 :can-cancel="false"/>
     </div>
 </template>
diff --git a/src/views/admin/pages/lists/capabilities-page.vue b/src/views/admin/pages/lists/capabilities-page.vue
index 4a6b34b0d..ea7ecc93d 100644
--- a/src/views/admin/pages/lists/capabilities-page.vue
+++ b/src/views/admin/pages/lists/capabilities-page.vue
@@ -14,7 +14,7 @@
                 <div class="control has-icons-right  is-small is-clearfix">
                     <b-autocomplete
                             clearable
-                            v-model:value="filteredRole"
+                            v-model="filteredRole"
                             :data="filteredRoles"
                             :placeholder="$i18n.get('instruction_type_search_roles_filter')"
                             keep-first
@@ -28,7 +28,7 @@
         <div>
             <b-loading
                     :is-full-page="true" 
-                    v-model:active="isLoading" 
+                    v-model="isLoading" 
                     :can-cancel="false"/>
 
             <capabilities-list
diff --git a/src/views/admin/pages/lists/collections-page.vue b/src/views/admin/pages/lists/collections-page.vue
index 1a04e3020..c4b79e020 100644
--- a/src/views/admin/pages/lists/collections-page.vue
+++ b/src/views/admin/pages/lists/collections-page.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="repository-level-page page-container">
-        <b-loading v-model:active="isLoading"/>
+        <b-loading v-model="isLoading"/>
         <tainacan-title 
                 :bread-crumb-items="[{ path: '', label: $i18n.get('collections') }]"/>
         <div class="sub-header">
@@ -13,14 +13,14 @@
                         aria-role="list"
                         id="collection-creation-options-dropdown"
                         trap-focus>
-                    <button
-                            class="button is-secondary"
-                            slot="trigger">
-                        <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button class="button is-secondary">
+                            <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                            </span>
+                        </button>
+                    </template>   
                     <b-dropdown-item aria-role="listitem">
                         <router-link
                                 :to="{ path: $routerHelper.getNewCollectionPath() }"
@@ -71,15 +71,16 @@
                             class="show metadata-options-dropdown"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="collectionTaxonomy['name']"
-                                class="button is-white"
-                                slot="trigger">
-                            <span>{{ collectionTaxonomy['name'] }}</span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="collectionTaxonomy['name']"
+                                    class="button is-white">
+                                <span>{{ collectionTaxonomy['name'] }}</span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <div class="metadata-options-container">
                             <b-dropdown-item
                                     v-for="(collectionTaxonomyTerm, index) in collectionTaxonomy['terms']"
@@ -88,7 +89,7 @@
                                     custom
                                     aria-role="listitem">
                                 <b-checkbox
-                                        v-model:value="collectionTaxonomyTerm.enabled"
+                                        v-model="collectionTaxonomyTerm.enabled"
                                         :native-value="collectionTaxonomyTerm.enabled">
                                     {{ collectionTaxonomyTerm.name }}
                                 </b-checkbox>
@@ -109,29 +110,28 @@
             <!-- Sorting options ----  -->
             <b-field class="header-item">
                 <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
-                <pre>{{ collections.length }}</pre>
-                <pre>{{ isLoading }}</pre>
                 <b-dropdown
                         :mobile-modal="true"
                         :disabled="collections.length <= 0 || isLoading"
-                        @input="onChangeOrder"
+                        @update:model-value="onChangeOrder"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            :aria-label="$i18n.get('label_sorting_direction')"
-                            class="button is-white"
-                            slot="trigger">
-                        <span 
-                                style="margin-top: -2px;"
-                                class="icon is-small gray-icon">
-                            <i 
-                                    :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
-                                    class="tainacan-icon tainacan-icon-1-125em"/>
-                        </span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                :aria-label="$i18n.get('label_sorting_direction')"
+                                class="button is-white">
+                            <span 
+                                    style="margin-top: -2px;"
+                                    class="icon is-small gray-icon">
+                                <i 
+                                        :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
+                                        class="tainacan-icon tainacan-icon-1-125em"/>
+                            </span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item
                             aria-controls="items-list-results"
                             role="button"
@@ -165,8 +165,8 @@
                 <b-select
                         class="sorting-select"
                         :disabled="collections.length <= 0"
-                        @input="onChangeOrderBy($event)"
-                        :value="orderBy"
+                        @update:model-value="onChangeOrderBy($event)"
+                        :model-value="orderBy"
                         :label="$i18n.get('label_sorting')">
                     <option
                             v-for="(option, index) in sortingOptions"
@@ -185,7 +185,7 @@
                         size="is-small"
                         :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('collections')"
                         autocomplete="on"
-                        v-model:value="searchQuery"
+                        v-model="searchQuery"
                         @keyup.enter="searchCollections()"
                         icon-right="magnify"
                         icon-right-clickable
@@ -263,14 +263,14 @@
                                         id="collection-creation-options-dropdown"
                                         aria-role="list"
                                         trap-focus>
-                                    <button
-                                            class="button is-secondary"
-                                            slot="trigger">
-                                        <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
-                                        <span class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                                        </span>
-                                    </button>
+                                    <template #trigger>
+                                        <button class="button is-secondary">
+                                            <div>{{ $i18n.getFrom('collections', 'new_item') }}</div>
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                            </span>
+                                        </button>
+                                    </template>
                                     <b-dropdown-item aria-role="listitem">
                                         <router-link
                                                 :to="{ path: $routerHelper.getNewCollectionPath() }"
@@ -330,8 +330,8 @@
                                 horizontal 
                                 :label="$i18n.get('label_collections_per_page')"> 
                             <b-select 
-                                    :value="collectionsPerPage"
-                                    @input="onChangeCollectionsPerPage" 
+                                    :model-value="collectionsPerPage"
+                                    @update:model-value="onChangeCollectionsPerPage" 
                                     :disabled="collections.length <= 0">
                                 <option value="12">12</option>
                                 <option value="24">24</option>
@@ -344,7 +344,7 @@
                         <b-pagination
                                 @change="onPageChange"
                                 :total="totalCollections"
-                                v-model:current="page"
+                                v-model="page"
                                 order="is-centered"
                                 size="is-small"
                                 :per-page="collectionsPerPage"
@@ -392,9 +392,7 @@ export default {
     },
     computed: {
         collections() {
-            const ope = this.getCollections();
-            console.log(ope.length)
-            return  ope;
+            return this.getCollections();
         },
         repositoryTotalCollections(){
             return this.getRepositoryTotalCollections();
@@ -537,7 +535,6 @@ export default {
             .then((res) => {
                 this.isLoading = false;
                 this.totalCollections = res.total;
-                console.log(this.isLoading)
             }) 
             .catch(() => {
                 this.isLoading = false;
diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index 51e197c7c..e351b1c86 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -8,7 +8,7 @@
         </template>
                         
         <div class="filters-list-page">
-            <b-loading v-model:active="isLoadingMetadatumTypes"/>
+            <b-loading v-model="isLoadingMetadatumTypes"/>
             
             <div
                     v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))"
@@ -25,7 +25,7 @@
                             <b-field class="header-item">
                                 <b-input 
                                         :placeholder="$i18n.get('instruction_type_search_filter_filter')"
-                                        v-model:value="filterNameFilterString"
+                                        v-model="filterNameFilterString"
                                         icon="magnify"
                                         size="is-small"
                                         icon-right="close-circle"
@@ -49,176 +49,181 @@
                         </div>
                     </section>
 
-                    <draggable
+                    <sortable
+                            :list="activeFiltersList"
+                            item-key="id"
+                            @update="handleChangeOnFilter"
+                            @add="handleChangeOnFilter"
+                            @remove="handleChangeOnFilter"
                             class="active-filters-area"
-                            @change="handleChangeOnFilter"
-                            :class="{'filters-area-receive': isDraggingFromAvailable}" 
-                            v-model:value="activeFiltersList"
-                            :group="{ name:'filters', pull: false, put: true }"
-                            :sort="(openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel"
-                            :handle="'.handle'" 
-                            ghost-class="sortable-ghost"
-                            filter=".not-sortable-item"
-                            :prevent-on-filter="false"
-                            :animation="250">
-                        <div
-                                class="active-filter-item" 
-                                :class="{
-                                    'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''),
-                                    'not-focusable-item': openedFilterId == filter.id, 
-                                    'disabled-filter': filter.enabled == false,
-                                    'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel
-                                }" 
-                                v-for="(filter, index) in activeFiltersList" 
-                                :key="filter.id"
-                                v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0">
-                            <div class="handle">
-                                <span
-                                        v-if="!isRepositoryLevel"
-                                        class="sorting-buttons">
-                                    <button 
-                                            :disabled="index == 0"
-                                            class="link-button"
-                                            @click="moveFilterUpViaButton(index)"
-                                            :aria-label="$i18n.get('label_move_up')">
-                                        <span class="icon">
-                                            <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
-                                        </span>
-                                    </button>
-                                    <button 
-                                            :disabled="index == activeFiltersList.length - 1"
-                                            class="link-button"
-                                            @click="moveFilterDownViaButton(index)"
-                                            :aria-label="$i18n.get('label_move_down')">
-                                        <span class="icon">
-                                            <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
-                                        </span>
-                                    </button>
-                                </span>
-                                <span 
-                                        :style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
-                                        v-tooltip="{
-                                            content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                            placement: 'auto-start'
-                                        }"
-                                        class="icon grip-icon">
-                                    <svg 
-                                            xmlns="http://www.w3.org/2000/svg" 
-                                            height="24px"
-                                            viewBox="0 0 24 24"
-                                            width="24px"
-                                            fill="currentColor">
-                                        <path
-                                                d="M0 0h24v24H0V0z"
-                                                fill="transparent"/>
-                                        <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                                    </svg>
-                                </span>
-                                <span 
-                                        class="filter-name"
-                                        :class="{'is-danger': formWithErrors == filter.id }">
-                                        {{ filter.name }}
-                                </span>
-                                <span   
-                                        v-if="filter.filter_type_object != undefined"
-                                        class="label-details">  
-                                    ({{ filter.filter_type_object.name }}) 
-                                    <!-- <em v-if="filter.inherited">{{ $i18n.get('label_inherited') }}</em>  -->
-                                    <span 
-                                            class="not-saved" 
-                                            v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'"> 
-                                        {{ $i18n.get('info_not_saved') }}
-                                    </span>
-                                    <span 
-                                            v-if="filter.status == 'private'"
-                                            class="icon"
-                                            v-tooltip="{
-                                                content: $i18n.get('status_private'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                                placement: 'auto-start'
-                                            }">
-                                        <i class="tainacan-icon tainacan-icon-private"/>
-                                    </span>
-                                    <span 
-                                            v-tooltip="{
-                                                content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                                placement: 'auto-start'
-                                            }"
-                                            class="icon icon-level-identifier">
-                                        <i 
-                                            :class="{ 
-                                                'tainacan-icon-collection': filter.collection_id == collectionId, 
-                                                'tainacan-icon-repository': filter.collection_id != collectionId,
-                                                'has-text-turquoise5': filter.enabled && filter.collection_id != 'default', 
-                                                'has-text-blue5': filter.enabled && filter.collection_id == 'default',
-                                                'has-text-gray3': !filter.enabled  
-                                            }"
-                                            class="tainacan-icon" />
-                                    </span> 
-                                </span>
-                                <span 
-                                        class="loading-spinner" 
-                                        v-if="filter.id == undefined"/>
-                                <span 
-                                        class="controls" 
-                                        v-if="filter.filter_type != undefined">
-                                    <b-switch
+                            :class="{ 'filters-area-receive': isDraggingFromAvailable }" 
+                            :options="{
+                                group: { name:'filters', pull: false, put: true },
+                                sort: (openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel,
+                                handle: '.handle',
+                                hostClass: 'sortable-ghost',
+                                filter: '.not-sortable-item',
+                                preventOnFilter: false,
+                                animation: 250
+                            }">
+                        <template #item="{ element: filter, index }">
+                            <div
+                                    class="active-filter-item" 
+                                    :class="{
+                                        'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''),
+                                        'not-focusable-item': openedFilterId == filter.id, 
+                                        'disabled-filter': filter.enabled == false,
+                                        'inherited-filter': filter.collection_id != collectionId || isRepositoryLevel
+                                    }" 
+                                    v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0">
+                                <div class="handle">
+                                    <span
                                             v-if="!isRepositoryLevel"
-                                            :disabled="isUpdatingFiltersOrder" 
-                                            size="is-small" 
-                                            :value="filter.enabled" 
-                                            @input="onChangeEnable($event, index)"/>
-                                    <a 
-                                            v-if="filter.current_user_can_delete"
-                                            :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }"
-                                            @click.prevent="toggleFilterEdition(filter.id)">
+                                            class="sorting-buttons">
+                                        <button 
+                                                :disabled="index == 0"
+                                                class="link-button"
+                                                @click="moveFilterUpViaButton(index)"
+                                                :aria-label="$i18n.get('label_move_up')">
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-previous tainacan-icon-rotate-90" />
+                                            </span>
+                                        </button>
+                                        <button 
+                                                :disabled="index == activeFiltersList.length - 1"
+                                                class="link-button"
+                                                @click="moveFilterDownViaButton(index)"
+                                                :aria-label="$i18n.get('label_move_down')">
+                                            <span class="icon">
+                                                <i class="tainacan-icon tainacan-icon-next tainacan-icon-rotate-90" />
+                                            </span>
+                                        </button>
+                                    </span>
+                                    <span 
+                                            :style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
+                                            v-tooltip="{
+                                                content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                                placement: 'auto-start'
+                                            }"
+                                            class="icon grip-icon">
+                                        <svg 
+                                                xmlns="http://www.w3.org/2000/svg" 
+                                                height="24px"
+                                                viewBox="0 0 24 24"
+                                                width="24px"
+                                                fill="currentColor">
+                                            <path
+                                                    d="M0 0h24v24H0V0z"
+                                                    fill="transparent"/>
+                                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                                        </svg>
+                                    </span>
+                                    <span 
+                                            class="filter-name"
+                                            :class="{'is-danger': formWithErrors == filter.id }">
+                                            {{ filter.name }}
+                                    </span>
+                                    <span   
+                                            v-if="filter.filter_type_object != undefined"
+                                            class="label-details">  
+                                        ({{ filter.filter_type_object.name }}) 
+                                        <!-- <em v-if="filter.inherited">{{ $i18n.get('label_inherited') }}</em>  -->
+                                        <span 
+                                                class="not-saved" 
+                                                v-if="(editForms[filter.id] != undefined && editForms[filter.id].saved != true) ||filter.status == 'auto-draft'"> 
+                                            {{ $i18n.get('info_not_saved') }}
+                                        </span>
+                                        <span 
+                                                v-if="filter.status == 'private'"
+                                                class="icon"
+                                                v-tooltip="{
+                                                    content: $i18n.get('status_private'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                                    placement: 'auto-start'
+                                                }">
+                                            <i class="tainacan-icon tainacan-icon-private"/>
+                                        </span>
                                         <span 
                                                 v-tooltip="{
-                                                    content: $i18n.get('edit'),
+                                                    content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
                                                     autoHide: true,
                                                     popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                                    placement: 'bottom'
+                                                    placement: 'auto-start'
                                                 }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                        </span>
-                                    </a>
-                                    <a 
-                                            v-if="filter.current_user_can_delete"
-                                            :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
-                                            @click.prevent="removeFilter(filter)">
-                                        <span
-                                                v-tooltip="{
-                                                    content: $i18n.get('delete'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                                    placement: 'bottom'
+                                                class="icon icon-level-identifier">
+                                            <i 
+                                                :class="{ 
+                                                    'tainacan-icon-collection': filter.collection_id == collectionId, 
+                                                    'tainacan-icon-repository': filter.collection_id != collectionId,
+                                                    'has-text-turquoise5': filter.enabled && filter.collection_id != 'default', 
+                                                    'has-text-blue5': filter.enabled && filter.collection_id == 'default',
+                                                    'has-text-gray3': !filter.enabled  
                                                 }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
-                                        </span>
-                                    </a>
-                                </span>
+                                                class="tainacan-icon" />
+                                        </span> 
+                                    </span>
+                                    <span 
+                                            class="loading-spinner" 
+                                            v-if="filter.id == undefined"/>
+                                    <span 
+                                            class="controls" 
+                                            v-if="filter.filter_type != undefined">
+                                        <b-switch
+                                                v-if="!isRepositoryLevel"
+                                                :disabled="isUpdatingFiltersOrder" 
+                                                size="is-small" 
+                                                :model-value="filter.enabled" 
+                                                @update:model-value="onChangeEnable($event, index)"/>
+                                        <a 
+                                                v-if="filter.current_user_can_delete"
+                                                :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }"
+                                                @click.prevent="toggleFilterEdition(filter.id)">
+                                            <span 
+                                                    v-tooltip="{
+                                                        content: $i18n.get('edit'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                                        placement: 'bottom'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                            </span>
+                                        </a>
+                                        <a 
+                                                v-if="filter.current_user_can_delete"
+                                                :style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
+                                                @click.prevent="removeFilter(filter)">
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('delete'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                                        placement: 'bottom'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                            </span>
+                                        </a>
+                                    </span>
+                                </div>
+                                <transition name="form-collapse">
+                                    <b-field v-if="openedFilterId == filter.id">
+                                        <filter-edition-form
+                                                @onEditionFinished="onEditionFinished()"
+                                                @onEditionCanceled="onEditionCanceled()"
+                                                @onErrorFound="formWithErrors = filter.id"
+                                                @onUpdateSavedState="(state) => editForms[filter.id].saved = state"
+                                                :index="index"
+                                                :original-filter="filter"
+                                                :edited-filter="editForms[openedFilterId]"/>
+                                    </b-field>
+                                </transition>
                             </div>
-                            <transition name="form-collapse">
-                                <b-field v-if="openedFilterId == filter.id">
-                                    <filter-edition-form
-                                            @onEditionFinished="onEditionFinished()"
-                                            @onEditionCanceled="onEditionCanceled()"
-                                            @onErrorFound="formWithErrors = filter.id"
-                                            @onUpdateSavedState="(state) => editForms[filter.id].saved = state"
-                                            :index="index"
-                                            :original-filter="filter"
-                                            :edited-filter="editForms[openedFilterId]"/>
-                                </b-field>
-                            </transition>
-                        </div>
-                    </draggable>
+                        </template>
+                    </sortable>
                 </div>
                 <div 
                         v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
@@ -231,7 +236,7 @@
                             <b-field class="header-item">
                                 <b-input 
                                         :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
-                                        v-model:value="metadatumNameFilterString"
+                                        v-model="metadatumNameFilterString"
                                         icon="magnify"
                                         size="is-small"
                                         icon-right="close-circle"
@@ -241,19 +246,24 @@
                         </template>
                     </div>
                     <div class="field" >
-
-                        <draggable
-                                @change="handleChangeOnMetadata"
+                        
+                        <sortable
                                 v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
-                                v-model:value="availableMetadata"
-                                :sort="false"
-                                filter=".not-sortable-item"
-                                :prevent-on-filter="false" 
-                                :group="{ name:'filters', pull: !isSelectingFilterType, put: false, revertClone: true }"
-                                drag-class="sortable-drag">
-                            <template 
-                                    v-for="(metadatum, index) in availableMetadata"
-                                    :key="index">
+                                :list="availableMetadata"
+                                item-key="id"
+                                @change="handleChangeOnMetadata"
+                                :options="{
+                                    group: {
+                                        name:'filters',
+                                        pull: !isSelectingFilterType, 
+                                        put: false, revertClone: true
+                                    },
+                                    sort: false,
+                                    filter: '.not-sortable-item',
+                                    preventOnFilter: false,
+                                    dragClass: 'sortable-drag'
+                                }">
+                            <template #item="{ element: metadatum, index }">
                                 <div 
                                         class="available-metadatum-item"
                                         :class="{
@@ -317,7 +327,7 @@
                                     </span> 
                                 </div>
                             </template>
-                        </draggable>   
+                        </sortable>   
                     
                         <section 
                                 v-if="availableMetadata.length <= 0 && !isLoadingMetadatumTypes"
@@ -361,11 +371,10 @@
                 </div>
             </section>
 
-
             <b-modal 
                     ref="filterTypeModal"
                     :width="680"
-                    v-model:active="isSelectingFilterType"
+                    v-model="isSelectingFilterType"
                     trap-focus
                     aria-modal
                     aria-role="dialog"
@@ -442,7 +451,7 @@
                     </section>
                 </div>
             </b-modal>
-        </div> 
+        </div>
     </div>
 </template>
 
@@ -452,11 +461,13 @@ import { mapActions, mapGetters } from 'vuex';
 
 import FilterEditionForm from '../../components/edition/filter-edition-form.vue';
 import CustomDialog from '../../components/other/custom-dialog.vue';
+import { Sortable } from "sortablejs-vue3";
 
 export default {
     name: 'FiltersPage',
     components: {
-        FilterEditionForm
+        FilterEditionForm,
+        Sortable
     },
     beforeRouteLeave ( to, from, next ) {
         let hasUnsavedForms = false;
@@ -613,14 +624,26 @@ export default {
         ...mapGetters('collection', [
             'getCollection',
         ]),
-        handleChangeOnFilter($event) {     
-            if ($event.added) {
-                this.prepareFilterTypeSelection($event.added.element, $event.added.newIndex);    
-            } else if ($event.removed) {
-                this.removeFilter($event.removed.element);
-            } else if ($event.moved) {
-                if (!this.isRepositoryLevel)
-                    this.updateFiltersOrder(); 
+        handleChangeOnFilter($event) {
+            switch( $event.type ) {
+                case 'add':
+                    this.prepareFilterTypeSelection(this.availableMetadata[$event.oldIndex], $event.newIndex);
+                    break;
+                case 'remove':
+                    this.removeFilter(this.activeFiltersList[$event.oldIndex]);
+                    break;
+                case 'update': {
+                    const newActiveFiltersList = JSON.parse(JSON.stringify(this.activeFiltersList));
+                    const element = newActiveFiltersList.splice($event.oldIndex, 1)[0];
+                    newActiveFiltersList.splice($event.newIndex, 0, element);
+                    
+                    this.updateFilters(newActiveFiltersList);
+                    
+                    if (!this.isRepositoryLevel)
+                        this.updateFiltersOrder();
+
+                    break;
+                }
             }
         },
         prepareFilterTypeSelection(choosenMetadatum, newFilterIndex) {
@@ -692,6 +715,7 @@ export default {
         },
         updateListOfMetadata() {
             const availableMetadata = JSON.parse(JSON.stringify(this.getMetadata()));
+
             const availableMetadataNames = {};
             let lastParentName = '';
 
@@ -1069,6 +1093,7 @@ export default {
                 .grip-icon { 
                     color: var(--tainacan-gray3);
                     position: relative;
+                    flex-shrink: 0;
                 }
                 .filter-name {
                     text-overflow: ellipsis;
@@ -1207,6 +1232,7 @@ export default {
                 .grip-icon { 
                     color: var(--tainacan-gray3);
                     position: relative;
+                    flex-shrink: 0;
                 }
                 .icon-level-identifier {
                     position: relative;
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index d08cb721c..3051ccc88 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -26,7 +26,7 @@
             </h3>
             <!-- <b-loading
                     :is-full-page="false"
-                    v-model:active="isLoadingMetadata"/> -->
+                    v-model="isLoadingMetadata"/> -->
                         <!-- Button for hiding filters -->
             <button 
                     aria-controls="filters-modal"
@@ -65,19 +65,20 @@
                             :mobile-modal="false"
                             :disabled="openAdvancedSearch"
                             :triggers="hasSearchByMoreThanOneWord ? ['click','contextmenu','focus'] : []">
-                        <b-input
-                                slot="trigger"
-                                size="is-small"
-                                :placeholder="$i18n.get('instruction_search')"
-                                type="search"
-                                :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
-                                :value="searchQuery"
-                                @input="typeFutureSearch"
-                                @keyup.enter="updateSearch()"
-                                icon-right="magnify"
-                                icon-right-clickable
-                                @icon-right-click="updateSearch()"
-                                :disabled="openAdvancedSearch" />
+                        <template #trigger>
+                            <b-input
+                                    size="is-small"
+                                    :placeholder="$i18n.get('instruction_search')"
+                                    type="search"
+                                    :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
+                                    :model-value="searchQuery"
+                                    @update:model-value="typeFutureSearch"
+                                    @keyup.enter="updateSearch()"
+                                    icon-right="magnify"
+                                    icon-right-clickable
+                                    @icon-right-click="updateSearch()"
+                                    :disabled="openAdvancedSearch" />
+                        </template>
                         <b-dropdown-item 
                                 @click="updateSearch()"
                                 :focusable="false">
@@ -88,10 +89,10 @@
                                 custom
                                 :focusable="false">
                             <b-checkbox 
-                                    :value="sentenceMode"
+                                    :model-value="sentenceMode"
                                     :true-value="false"
                                     :false-value="true"
-                                    @input="$eventBusSearch.setSentenceMode($event)">
+                                    @update:model-value="$eventBusSearch.setSentenceMode($event)">
                                 {{ $i18n.get('label_use_search_separated_words') }}
                             </b-checkbox>
                             <small class="is-small help">{{ $i18n.get('info_use_search_separated_words') }}</small>
@@ -151,16 +152,15 @@
                         id="item-creation-options-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            class="button is-secondary"
-                            slot="trigger">
-                        <span class="is-hidden-touch">{{ $i18n.getFrom('items','add_new') }}</span>
-                        <span class="is-hidden-desktop">{{ $i18n.get('add') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                        </span>
-                    </button>
-
+                    <template #trigger>
+                        <button class="button is-secondary">
+                            <span class="is-hidden-touch">{{ $i18n.getFrom('items','add_new') }}</span>
+                            <span class="is-hidden-desktop">{{ $i18n.get('add') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                            </span>
+                        </button>
+                    </template>
                     <b-dropdown-item 
                             v-if="!isRepositoryLevel"
                             aria-role="listitem">
@@ -237,16 +237,17 @@
                         class="show metadata-options-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            :aria-label="$i18n.get('label_displayed_metadata')"
-                            class="button is-white"
-                            slot="trigger">
-                        <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
-                        <span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                :aria-label="$i18n.get('label_displayed_metadata')"
+                                class="button is-white">
+                            <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
+                            <span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                            </span>
+                        </button>
+                    </template>
                     <div class="metadata-options-container">
                         <b-dropdown-item
                                 v-for="(column, index) in localDisplayedMetadata"
@@ -255,7 +256,7 @@
                                 custom
                                 aria-role="listitem">
                             <b-checkbox
-                                    v-model:value="column.display"
+                                    v-model="column.display"
                                     :native-value="column.display">
                                 {{ column.name }}
                             </b-checkbox>
@@ -278,28 +279,29 @@
                     <label class="label">{{ $i18n.get('label_sort') }}&nbsp;</label>
                     <b-dropdown
                             :mobile-modal="true"
-                            @input="onChangeOrder"
+                            @update:model-value="onChangeOrder"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_sorting_direction')"
-                                class="button is-white"
-                                slot="trigger"
-                                style="padding-right: 3px !important;">
-                            <span class="icon is-small gray-icon">
-                                <i 
-                                        :class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
-                                        class="tainacan-icon"/>
-                            </span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_sorting_direction')"
+                                    class="button is-white"
+                                    style="padding-right: 3px !important;">
+                                <span class="icon is-small gray-icon">
+                                    <i 
+                                            :class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
+                                            class="tainacan-icon"/>
+                                </span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <b-dropdown-item
                                 aria-controls="items-list-results"
                                 role="button"
                                 :class="{ 'is-active': order == 'DESC' }"
-                                :value="'DESC'"
+                                :model-value="'DESC'"
                                 aria-role="listitem">
                             <span class="icon gray-icon">
                                 <i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortdescending"/>
@@ -310,7 +312,7 @@
                                 aria-controls="items-list-results"
                                 role="button"
                                 :class="{ 'is-active': order == 'ASC' }"
-                                :value="'ASC'"
+                                :model-value="'ASC'"
                                 aria-role="listitem">
                             <span class="icon gray-icon">
                                 <i class="tainacan-icon tainacan-icon-18px tainacan-icon-sortascending"/>
@@ -325,18 +327,19 @@
                     </span>
                     <b-dropdown
                             :mobile-modal="true"
-                            @input="onChangeOrderBy($event)"
+                            @update:model-value="onChangeOrderBy($event)"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_sorting')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span>{{ orderByName }}</span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_sorting')"
+                                    class="button is-white">
+                                <span>{{ orderByName }}</span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <template 
                                 v-for="metadatum of sortingMetadata"
                                 :key="metadatum.slug">
@@ -373,33 +376,34 @@
                             :aria-label="$i18n.get('label_view_mode')"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_view_mode')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span class="view-mode-icon icon is-small gray-icon">
-                                <i 
-                                        v-if="adminViewMode !== 'map'"
-                                        :class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined),
-                                                'tainacan-icon-viewcards' : adminViewMode == 'cards',
-                                                'tainacan-icon-viewminiature' : adminViewMode == 'grid',
-                                                'tainacan-icon-viewrecords' : adminViewMode == 'records',
-                                                'tainacan-icon-viewlist' : adminViewMode == 'list',
-                                                'tainacan-icon-viewmasonry' : adminViewMode == 'masonry' }"
-                                        class="tainacan-icon tainacan-icon-1-25em"/>
-                                <svg
-                                        v-else
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 24 24"
-                                        style="fill: var(--tainacan-info-color)">
-                                    <path d="M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" />
-                                </svg>
-                            </span>
-                            &nbsp;&nbsp;&nbsp;{{ adminViewMode != undefined ? $i18n.get('label_' + adminViewMode) : $i18n.get('label_table') }}
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_view_mode')"
+                                    class="button is-white">
+                                <span class="view-mode-icon icon is-small gray-icon">
+                                    <i 
+                                            v-if="adminViewMode !== 'map'"
+                                            :class="{'tainacan-icon-viewtable' : ( adminViewMode == 'table' || adminViewMode == undefined),
+                                                    'tainacan-icon-viewcards' : adminViewMode == 'cards',
+                                                    'tainacan-icon-viewminiature' : adminViewMode == 'grid',
+                                                    'tainacan-icon-viewrecords' : adminViewMode == 'records',
+                                                    'tainacan-icon-viewlist' : adminViewMode == 'list',
+                                                    'tainacan-icon-viewmasonry' : adminViewMode == 'masonry' }"
+                                            class="tainacan-icon tainacan-icon-1-25em"/>
+                                    <svg
+                                            v-else
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 24 24"
+                                            style="fill: var(--tainacan-info-color)">
+                                        <path d="M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" />
+                                    </svg>
+                                </span>
+                                &nbsp;&nbsp;&nbsp;{{ adminViewMode != undefined ? $i18n.get('label_' + adminViewMode) : $i18n.get('label_table') }}
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <b-dropdown-item 
                                 aria-controls="items-list-results"
                                 role="button"
@@ -513,7 +517,7 @@
                 role="region"
                 id="filters-modal"     
                 ref="filters-modal"       
-                v-model:active="isFiltersModalActive"
+                v-model="isFiltersModalActive"
                 :width="736"
                 animation="slide-menu"
                 trap-focus
@@ -587,7 +591,7 @@
                     <b-loading
                             v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)" 
                             :is-full-page="false"
-                            :active="showLoading"/>
+                            :model-value="showLoading"/>
 
                     <!-- Custom skeleton templates used by some view modes -->
                     <div
@@ -685,10 +689,10 @@
                             </template>
                             <br>
                             <b-checkbox 
-                                    :value="sentenceMode"
+                                    :model-value="sentenceMode"
                                     :true-value="false"
                                     :false-value="true"
-                                    @input="$eventBusSearch.setSentenceMode($event); updateSearch();">
+                                    @update:model-value="$eventBusSearch.setSentenceMode($event); updateSearch();">
                                 {{ $i18n.get('label_use_search_separated_words') }}
                             </b-checkbox>
                         </p>
@@ -816,6 +820,152 @@
             }
         },
         watch: {
+            '$route': {
+                handler(to, from) {
+
+                    // Should set Collection ID from URL only when in admin.
+                    if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage')
+                        this.$eventBusSearch.setCollectionId( !this.$route.params.collectionId ? this.$route.params.collectionId : parseInt(this.$route.params.collectionId) );
+                    
+                    // Fills the URL with appropriate default values in case a query is not passed
+                    if (this.$route.name == null || this.$route.name == undefined || this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
+                        
+                        // Items Per Page
+                        if (this.$route.query.perpage == undefined || to.params.collectionId != from.params.collectionId) {
+                            let perPageKey = (this.collectionId != undefined ? 'items_per_page_' + this.collectionId : 'items_per_page');
+                            let perPageValue = this.$userPrefs.get(perPageKey);
+
+                            if (perPageValue)
+                                this.$route.query.perpage = perPageValue;
+                            else {
+                                this.$route.query.perpage = 12;
+                                this.$userPrefs.set(perPageKey, 12);
+                            }
+                        }    
+                        
+                        // Page
+                        if (this.$route.query.paged == undefined || to.params.collectionId != from.params.collectionId)
+                            this.$route.query.paged = 1;
+                        
+                        // Order (ASC, DESC)
+                        if (this.$route.query.order == undefined || to.params.collectionId != from.params.collectionId) {
+                            let orderKey = (this.collectionId != undefined ? 'order_' + this.collectionId : 'order');
+                            let orderValue = this.$userPrefs.get(orderKey) ? this.$userPrefs.get(orderKey) : this.defaultOrder;
+                            
+                            if (orderValue)
+                                this.$route.query.order = orderValue;
+                            else {
+                                this.$route.query.order = 'DESC';
+                                this.$userPrefs.set(orderKey, 'DESC');
+                            }
+                        }
+                        
+                        // Order By (required extra work to deal with custom metadata ordering)
+                        if (this.$route.query.orderby == undefined || (to.params.collectionId != from.params.collectionId)) {
+                            let orderByKey = (this.collectionId != undefined ? 'order_by_' + this.collectionId : 'order_by');
+                            let orderBy = this.$userPrefs.get(orderByKey) ? this.$userPrefs.get(orderByKey) : this.defaultOrderBy;
+                        
+                            if (orderBy && orderBy != 'name') {
+                            
+                                // Previously was stored as a metadata object, now it is a orderby object
+                                if (orderBy.slug || typeof orderBy == 'string')
+                                    orderBy = this.$orderByHelper.getOrderByForMetadatum(orderBy);
+
+                                if (orderBy.orderby)
+                                    Object.keys(orderBy).forEach((paramKey) => {
+                                        this.$route.query[paramKey] = orderBy[paramKey];
+                                    });
+                                else
+                                    this.$route.query.orderby = 'date'
+                                
+                            } else {
+                                this.$route.query.orderby = 'date';
+                                this.$userPrefs.set(orderByKey, { 
+                                    slug: 'creation_date',
+                                    name: this.$i18n.get('label_creation_date')
+                                }).catch(() => { });
+                            }
+                        } else if ( this.$route.query.orderby == 'creation_date' ) { // Fixes old usage of creation_date
+                            this.$route.query.orderby = 'date'
+                        }
+
+                        // Theme View Modes
+                        if ((this.$route.name == null || this.$route.name == undefined ) && 
+                            this.$route.name != 'CollectionItemsPage' && this.$route.name != 'ItemsPage' &&
+                            (this.$route.query.view_mode == undefined || to.params.collectionId != from.params.collectionId)
+                        ) {
+                            
+                            let viewModeKey = (this.collectionId != undefined ? 'view_mode_' + this.collectionId : 'view_mode');
+                            let viewModeValue = this.$userPrefs.get(viewModeKey);
+
+                            if (viewModeValue)
+                                this.$route.query.view_mode = viewModeValue;
+                            else {
+                                this.$route.query.view_mode = 'table';
+                                this.$userPrefs.set(viewModeKey, 'table');
+                            }
+                        }
+
+                        // Emit slideshow-from to start this view mode from index
+                        if (this.$route.query.view_mode != 'slideshow' && this.$route.query['slideshow-from'] !== null && this.$route.query['slideshow-from'] !== undefined && this.$route.query['slideshow-from'] !== false)
+                            this.$eventBusSearchEmitter.emit('startSlideshowFromItem', this.$route.query['slideshow-from']);
+
+                        // Admin View Modes
+                        if (this.$route.name != null && this.$route.name != undefined  && 
+                            (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') &&
+                            (this.$route.query.admin_view_mode == undefined || to.params.collectionId != from.params.collectionId)
+                        ) {
+                            let adminViewModeKey = (this.collectionId != undefined ? 'admin_view_mode_' + this.collectionId : 'admin_view_mode');
+                            let adminViewModeValue = this.$userPrefs.get(adminViewModeKey);
+
+                            if (adminViewModeValue)
+                                this.$route.query.admin_view_mode = adminViewModeValue;
+                            else {
+                                this.$route.query.admin_view_mode = 'table';
+                                this.$userPrefs.set(adminViewModeKey, 'table');
+                            }
+                        }
+                        
+                        // Advanced Search
+                        if (this.$route.query && this.$route.query.advancedSearch){
+                            this.$store.dispatch('search/set_advanced_query', this.$route.query);
+                        } else {
+                            this.$store.dispatch('search/set_postquery', this.$route.query);
+                        }
+                        
+                        // Checks current metaqueries and taxqueries to alert filters that should reload
+                        // For some reason, this process is not working accessing to.query, so we need to check the path string. 
+                        const oldQueryString = from.fullPath.replace(from.path + '?', '');
+                        const newQueryString = to.fullPath.replace(from.path + '?', '');
+                        
+                        const oldQueryArray = oldQueryString.split('&');
+                        const newQueryArray = newQueryString.split('&');
+
+                        const oldMetaQueryArray = oldQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
+                        const newMetaQueryArray = newQueryArray.filter(queryItem => queryItem.startsWith('metaquery'));
+                        const oldTaxQueryArray  = oldQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
+                        const newTaxQueryArray  = newQueryArray.filter(queryItem => queryItem.startsWith('taxquery'));
+                        const oldStatusArray    = oldQueryArray.filter(queryItem => queryItem.startsWith('status'));
+                        const newStatusArray    = newQueryArray.filter(queryItem => queryItem.startsWith('status'));
+                        const oldSearchQuery    = oldQueryArray.filter(queryItem => queryItem.startsWith('search'));
+                        const newSearchQuery    = newQueryArray.filter(queryItem => queryItem.startsWith('search'));
+
+                        if (
+                            JSON.stringify(oldMetaQueryArray) != JSON.stringify(newMetaQueryArray) ||
+                            JSON.stringify(oldTaxQueryArray)  != JSON.stringify(newTaxQueryArray) ||
+                            JSON.stringify(oldStatusArray)    != JSON.stringify(newStatusArray) ||
+                            JSON.stringify(oldSearchQuery)    != JSON.stringify(newSearchQuery)
+                        ) {
+                            this.$eventBusSearchEmitter.emit('hasToReloadFacets', true);
+                        }
+                        
+                        // Finally, loads items
+                        if (to.fullPath != from.fullPath)
+                            this.$eventBusSearch.loadItems();
+                    }
+                },
+                deep: true
+            },
             displayedMetadata: {
                 handler() {
                     this.localDisplayedMetadata = JSON.parse(JSON.stringify(this.displayedMetadata));
@@ -824,7 +974,7 @@
             },
             openAdvancedSearch(newValue) {
                 if (newValue == false){
-                    this.$eventBusSearch.$emit('closeAdvancedSearch');
+                    this.$eventBusSearchEmitter.emit('closeAdvancedSearch');
                     this.futureSearchQuery = '';
                     this.isFiltersModalActive = true;
                 } else {
@@ -851,7 +1001,7 @@
             this.$eventBusSearch.setCollectionId(this.collectionId);
             this.$eventBusSearch.updateStoreFromURL();
 
-            this.$eventBusSearch.$emitter.on('isLoadingItems', isLoadingItems => {
+            this.$eventBusSearchEmitter.on('isLoadingItems', isLoadingItems => {
                 
                 if (isLoadingItems != this.isLoadingItems && this.$refs['items-page-container'] && this.$refs['search-control']) {
 
@@ -864,7 +1014,7 @@
                 this.isLoadingItems = isLoadingItems;
             });
 
-            this.$eventBusSearch.$emitter.on('hasFiltered', hasFiltered => {
+            this.$eventBusSearchEmitter.on('hasFiltered', hasFiltered => {
                 this.hasFiltered = hasFiltered;
             });
             
@@ -1402,8 +1552,8 @@
                 // $root
                 this.$root.$emitter.off('openAdvancedSearch');
                 // $eventBusSearch
-                this.$eventBusSearch.$emitter.off('isLoadingItems');
-                this.$eventBusSearch.$emitter.off('hasFiltered');
+                this.$eventBusSearchEmitter.off('isLoadingItems');
+                this.$eventBusSearchEmitter.off('hasFiltered');
             }
         }
     }
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 6caa278b5..1bb5583f3 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -13,7 +13,7 @@
         <div class="metadata-list-page">
             <b-tabs 
                     v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata') || (!isRepositoryLevel && collection && collection.current_user_can_edit_metadata))"
-                    v-model:value="activeTab">    
+                    v-model="activeTab">    
                 <b-tab-item :label="isRepositoryLevel ? repositoryTabLabel : collectionTabLabel">
                     <div class="columns">
 
@@ -326,6 +326,7 @@ export default {
                 .grip-icon { 
                     color: var(--tainacan-gray3); 
                     position: relative;
+                    flex-shrink: 0;
                 }
                 .metadatum-name {
                     white-space: nowrap;
diff --git a/src/views/admin/pages/lists/taxonomies-page.vue b/src/views/admin/pages/lists/taxonomies-page.vue
index 32159f14d..b05da2187 100644
--- a/src/views/admin/pages/lists/taxonomies-page.vue
+++ b/src/views/admin/pages/lists/taxonomies-page.vue
@@ -31,24 +31,25 @@
                     <b-dropdown
                             :mobile-modal="true"
                             :disabled="taxonomies.length <= 0 || isLoading"
-                            @input="onChangeOrder"
+                            @update:model-value="onChangeOrder"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_sorting_direction')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span 
-                                    style="margin-top: -2px;"
-                                    class="icon is-small gray-icon">
-                                <i 
-                                        :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
-                                        class="tainacan-icon tainacan-icon-1-125em"/>
-                            </span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_sorting_direction')"
+                                    class="button is-white">
+                                <span 
+                                        style="margin-top: -2px;"
+                                        class="icon is-small gray-icon">
+                                    <i 
+                                            :class="order == 'desc' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
+                                            class="tainacan-icon tainacan-icon-1-125em"/>
+                                </span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <b-dropdown-item
                                 aria-controls="items-list-results"
                                 role="button"
@@ -82,8 +83,8 @@
                     <b-select
                             class="sorting-select"
                             :disabled="taxonomies.length <= 0"
-                            @input="onChangeOrderBy($event)"
-                            :value="orderBy"
+                            @update:model-value="onChangeOrderBy($event)"
+                            :model-value="orderBy"
                             :label="$i18n.get('label_sorting')">
                         <option
                                 v-for="(option, index) in sortingOptions"
@@ -102,7 +103,7 @@
                             size="is-small"
                             :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')"
                             autocomplete="on"
-                            v-model:value="searchQuery"
+                            v-model="searchQuery"
                             @keyup.enter="searchTaxonomies()"
                             icon-right="magnify"
                             icon-right-clickable
@@ -113,7 +114,7 @@
             <div class="above-subheader">
                 <b-loading
                         :is-full-page="true" 
-                        v-model:active="isLoading" 
+                        v-model="isLoading" 
                         :can-cancel="false"/>
                 <div class="tabs">
                     <ul>
@@ -215,8 +216,8 @@
                                     horizontal 
                                     :label="$i18n.get('label_taxonomies_per_page')">
                                 <b-select
-                                        :value="taxonomiesPerPage"
-                                        @input="onChangePerPage"
+                                        :model-value="taxonomiesPerPage"
+                                        @update:model-value="onChangePerPage"
                                         :disabled="taxonomies.length <= 0">
                                     <option value="12">12</option>
                                     <option value="24">24</option>
@@ -229,7 +230,7 @@
                             <b-pagination
                                     @change="onPageChange"
                                     :total="total"
-                                    v-model:current="page"
+                                    v-model="page"
                                     order="is-centered"
                                     size="is-small"
                                     :per-page="taxonomiesPerPage"
diff --git a/src/views/admin/pages/singles/collection-page.vue b/src/views/admin/pages/singles/collection-page.vue
index d347156de..9120576ab 100644
--- a/src/views/admin/pages/singles/collection-page.vue
+++ b/src/views/admin/pages/singles/collection-page.vue
@@ -62,7 +62,6 @@ export default {
     },
     created() {
         this.collectionId = this.$route.params.collectionId;
-        console.log(this.$eventBusSearch)
         this.$eventBusSearch.setCollectionId(this.collectionId);
 
         // Loads to store basic collection info such as name, url, current_user_can_edit... etc.
diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue
index 5e563d5d3..bd7e3dd7d 100644
--- a/src/views/admin/pages/singles/item-page.vue
+++ b/src/views/admin/pages/singles/item-page.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <b-loading
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
 
         <tainacan-title 
@@ -262,7 +262,7 @@
                         <div 
                                 v-if="!$adminOptions.hideItemSingleAttachments"
                                 class="section-label">
-                            <label slot="header">
+                            <label>
                                 <span class="icon has-text-gray4">
                                     <i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-attachments"/>
                                 </span>
@@ -274,7 +274,7 @@
                                         ({{ totalAttachments }})
                                     </span>
                                 </span>
-                            </label> 
+                            </label>
                         </div>   
                         <div 
                                 v-if="item != undefined && item.id != undefined && !isLoading && !$adminOptions.hideItemSingleAttachments"
diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
index def8ac429..2b2a9effd 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
@@ -101,7 +101,6 @@
             <button 
                     class="swiper-button-prev" 
                     :id="blockId + '-prev'" 
-                    slot="button-prev"
                     :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
@@ -121,7 +120,6 @@
             <button 
                     class="swiper-button-next" 
                     :id="blockId + '-next'" 
-                    slot="button-next"
                     :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
index f4c511e63..b133b3ea0 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
@@ -104,7 +104,6 @@
             <button 
                     class="swiper-button-prev" 
                     :id="blockId + '-prev'" 
-                    slot="button-prev"
                     :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
@@ -123,8 +122,7 @@
             </button>
             <button 
                     class="swiper-button-next" 
-                    :id="blockId + '-next'" 
-                    slot="button-next"
+                    :id="blockId + '-next'"
                     :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
diff --git a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
index cc8c23acb..877a5b01f 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
@@ -102,7 +102,6 @@
             <button 
                     class="swiper-button-prev" 
                     :id="blockId + '-prev'" 
-                    slot="button-prev"
                     :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
@@ -121,8 +120,7 @@
             </button>
             <button 
                     class="swiper-button-next" 
-                    :id="blockId + '-next'" 
-                    slot="button-next"
+                    :id="blockId + '-next'"
                     :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
                 <svg
                         :width="largeArrows ? 60 : 42"
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
index b617fe713..e2d319a5d 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
@@ -163,7 +163,7 @@
                                 <b-select
                                         :placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
                                         id="tainacan-select-geocoordinate-metatum"
-                                        v-model:value="selectedGeocoordinateMetadatumId">
+                                        v-model="selectedGeocoordinateMetadatumId">
                                     <option
                                             v-for="(geocoordinateMetadatum, geocoordinateMetadatumId) in geocoordinateMetadata"
                                             :key="geocoordinateMetadatum.id"
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
index 22c0c7d69..d5401a998 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
@@ -312,7 +312,7 @@
                         class="field">
                     <b-collapse 
                             aria-id="metadata-collapse-for-slideshow"
-                            :open="!collapseAll">
+                            :model-value="!collapseAll">
                         <template #trigger="props">
                             <label class="label has-text-white">
                                 <span class="icon">
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index a3a2b38b4..1e2d9f326 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -75,19 +75,20 @@
                             :mobile-modal="false"
                             :disabled="openAdvancedSearch"
                             :triggers="hasSearchByMoreThanOneWord ? ['click','contextmenu','focus'] : []">
-                        <b-input
-                                slot="trigger"
-                                size="is-small"
-                                :placeholder="$i18n.get('instruction_search')"
-                                type="search"
-                                :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
-                                :value="searchQuery"
-                                @input="typeFutureSearch"
-                                @keyup.enter="updateSearch()"
-                                icon-right="magnify"
-                                icon-right-clickable
-                                @icon-right-click="updateSearch()"
-                                :disabled="openAdvancedSearch" />
+                        <template #trigger>
+                            <b-input
+                                    size="is-small"
+                                    :placeholder="$i18n.get('instruction_search')"
+                                    type="search"
+                                    :aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
+                                    :model-value="searchQuery"
+                                    @update:model-value="typeFutureSearch"
+                                    @keyup.enter="updateSearch()"
+                                    icon-right="magnify"
+                                    icon-right-clickable
+                                    @icon-right-click="updateSearch()"
+                                    :disabled="openAdvancedSearch" />
+                        </template>
                         <b-dropdown-item 
                                 @click="updateSearch()"
                                 :focusable="false">
@@ -98,10 +99,10 @@
                                 custom
                                 :focusable="false">
                             <b-checkbox 
-                                    :value="sentenceMode"
+                                    :model-value="sentenceMode"
                                     :true-value="false"
                                     :false-value="true"
-                                    @input="$eventBusSearch.setSentenceMode($event)">
+                                    @update:model-value="$eventBusSearch.setSentenceMode($event)">
                                 {{ $i18n.get('label_use_search_separated_words') }}
                             </b-checkbox>
                             <small class="is-small help">{{ $i18n.get('info_use_search_separated_words') }}</small>
@@ -170,16 +171,17 @@
                         class="show metadata-options-dropdown"
                         aria-role="list"
                         trap-focus>
-                    <button
-                            :aria-label="$i18n.get('label_displayed_metadata')"
-                            class="button is-white"
-                            slot="trigger">
-                        <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
-                        <span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
-                        </span>
-                    </button>
+                    <template #trigger>
+                        <button
+                                :aria-label="$i18n.get('label_displayed_metadata')"
+                                class="button is-white">
+                            <span class="is-hidden-touch is-hidden-desktop-only">{{ $i18n.get('label_displayed_metadata') }}</span>
+                            <span class="is-hidden-widescreen">{{ $i18n.get('metadata') }}</span>
+                            <span class="icon">
+                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                            </span>
+                        </button>
+                    </template>
                     <div class="metadata-options-container">
                     <b-dropdown-item
                             v-for="(column, index) in localDisplayedMetadata"
@@ -188,7 +190,7 @@
                             custom
                             aria-role="listitem">
                         <b-checkbox
-                                v-model:value="column.display"
+                                v-model="column.display"
                                 :native-value="column.display">
                             {{ column.name }}
                         </b-checkbox>
@@ -213,22 +215,23 @@
                     <label class="label">{{ $i18n.get('label_sort') }}</label>
                     <b-dropdown
                             :mobile-modal="true"
-                            @input="onChangeOrder"
+                            @update:model-value="onChangeOrder"
                             aria-role="list"
                             trap-focus>
-                        <button
-                                :aria-label="$i18n.get('label_sorting_direction')"
-                                class="button is-white"
-                                slot="trigger">
-                            <span class="icon is-small gray-icon">
-                                <i 
-                                        :class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
-                                        class="tainacan-icon"/>
-                            </span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button
+                                    :aria-label="$i18n.get('label_sorting_direction')"
+                                    class="button is-white">
+                                <span class="icon is-small gray-icon">
+                                    <i 
+                                            :class="order == 'DESC' ? 'tainacan-icon-sortdescending' : 'tainacan-icon-sortascending'"
+                                            class="tainacan-icon"/>
+                                </span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <b-dropdown-item
                                 aria-controls="items-list-results"
                                 role="button"
@@ -261,18 +264,19 @@
                         <b-dropdown
                                 id="tainacanSortByDropdown"
                                 :mobile-modal="true"
-                                @input="onChangeOrderBy($event)"
+                                @update:model-value="onChangeOrderBy($event)"
                                 aria-role="list"
                                 trap-focus>
-                            <button
-                                    :aria-label="$i18n.get('label_sorting')"
-                                    class="button is-white"
-                                    slot="trigger">
-                                <span>{{ orderByName }}</span>
-                                <span class="icon">
-                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                                </span>
-                            </button>
+                            <template #trigger>
+                                <button
+                                        :aria-label="$i18n.get('label_sorting')"
+                                        class="button is-white">
+                                    <span>{{ orderByName }}</span>
+                                    <span class="icon">
+                                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                    </span>
+                                </button>
+                            </template>
                             <template 
                                     v-for="metadatum of sortingMetadata"
                                     :key="metadatum.slug">
@@ -314,19 +318,20 @@
                             position="is-bottom-left"
                             aria-role="list"
                             trap-focus>
-                        <button 
-                                class="button is-white" 
-                                :aria-label="$i18n.get('label_view_mode') + (registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : '')"
-                                slot="trigger">
-                            <span 
-                                    class="gray-icon view-mode-icon"
-                                    v-if="registeredViewModes[viewMode] != undefined"
-                                    v-html="registeredViewModes[viewMode].icon"/>
-                            <span class="is-hidden-touch">&nbsp;&nbsp;&nbsp;{{ registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization') }}</span>
-                            <span class="icon">
-                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                            </span>
-                        </button>
+                        <template #trigger>
+                            <button 
+                                    class="button is-white" 
+                                    :aria-label="$i18n.get('label_view_mode') + (registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : '')">
+                                <span 
+                                        class="gray-icon view-mode-icon"
+                                        v-if="registeredViewModes[viewMode] != undefined"
+                                        v-html="registeredViewModes[viewMode].icon"/>
+                                <span class="is-hidden-touch">&nbsp;&nbsp;&nbsp;{{ registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization') }}</span>
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                </span>
+                            </button>
+                        </template>
                         <template 
                                 v-for="(viewModeOption, index) of enabledViewModes"
                                 :key="index">
@@ -414,7 +419,7 @@
                     role="region"
                     id="filters-modal"     
                     ref="filters-modal"       
-                    v-model:active="isFiltersModalActive"
+                    v-model="isFiltersModalActive"
                     :width="736"
                     :auto-focus="filtersAsModal"
                     :trap-focus="filtersAsModal"
@@ -547,7 +552,7 @@
                     <b-loading 
                             v-if="!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].skeleton_template != undefined)" 
                             :is-full-page="false"
-                            v-model:active="showLoading"/>
+                            v-model="showLoading"/>
 
                     <!-- Custom skeleton templates used by some view modes --> 
                     <div
@@ -634,10 +639,10 @@
                                 </template>
                                 <br>
                                 <b-checkbox 
-                                        :value="sentenceMode"
+                                        :model-value="sentenceMode"
                                         :true-value="false"
                                         :false-value="true"
-                                        @input="$eventBusSearch.setSentenceMode($event); updateSearch();">
+                                        @update:model-value="$eventBusSearch.setSentenceMode($event); updateSearch();">
                                     {{ $i18n.get('label_use_search_separated_words') }}
                                 </b-checkbox>
                             </p>
@@ -838,7 +843,7 @@
             },
             openAdvancedSearch(newValue){
                 if (newValue == false){
-                    this.$eventBusSearch.$emit('closeAdvancedSearch');
+                    this.$eventBusSearchEmitter.emit('closeAdvancedSearch');
                     this.isFiltersModalActive = !this.startWithFiltersHidden;
                 } else {
                     this.isFiltersModalActive = false;
@@ -901,7 +906,7 @@
                 }
             }
 
-            this.$eventBusSearch.$emitter.on('isLoadingItems', isLoadingItems => {
+            this.$eventBusSearchEmitter.on('isLoadingItems', isLoadingItems => {
 
                 this.isLoadingItems = isLoadingItems;
                 
@@ -915,7 +920,7 @@
                 }));
             });
 
-            this.$eventBusSearch.$emitter.on('hasFiltered', hasFiltered => {
+            this.$eventBusSearchEmitter.on('hasFiltered', hasFiltered => {
                 this.hasFiltered = hasFiltered;
             });
             
@@ -930,7 +935,7 @@
                 });
             }
 
-            this.$eventBusSearch.$emitter.on('startSlideshowFromItem', (index) => {
+            this.$eventBusSearchEmitter.on('startSlideshowFromItem', (index) => {
                 let currentQuery = this.$route.query;
                 delete currentQuery['slideshow-from'];
                 this.$router.replace({ query: currentQuery }).catch((error) => this.$console.log(error));
@@ -1464,8 +1469,8 @@
                 if (!this.hideAdvancedSearch)
                     this.$root.$emitter.off('openAdvancedSearch');
                 // $eventBusSearch
-                this.$eventBusSearch.$emitter.off('isLoadingItems');
-                this.$eventBusSearch.$emitter.off('hasFiltered');
+                this.$eventBusSearchEmitter.off('isLoadingItems');
+                this.$eventBusSearchEmitter.off('hasFiltered');
 
             },
         }
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/components/term-creation-panel.vue b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/components/term-creation-panel.vue
index b9eb55650..dbf78fa5d 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/components/term-creation-panel.vue
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/components/term-creation-panel.vue
@@ -13,7 +13,7 @@
         <div>
             <b-loading
                     :is-full-page="false"
-                    v-model:active="isLoading" />
+                    v-model="isLoading" />
 
             <!-- Name -------------- -->
             <b-field
@@ -29,7 +29,7 @@
                 </label>
                 <b-input
                         :placeholder="$i18n.get('label_term_without_name')"
-                        v-model:value="form.name"
+                        v-model="form.name"
                         name="name"
                         @focus="clearErrors({ name: 'name', repeated: 'repeated' })"/>
             </b-field>
@@ -43,10 +43,10 @@
             <label class="label is-inline">
                     {{ $i18n.get('label_parent_term') }}
                     <b-switch
-                            @input="onToggleSwitch()"
+                            @update:model-value="onToggleSwitch()"
                             id="tainacan-checkbox-has-parent" 
                             size="is-small"
-                            v-model:value="hasParent" />
+                            v-model="hasParent" />
                     <help-button
                             :title="$i18n.get('label_parent_term')"
                             :message="$i18n.get('info_help_parent_term')"/>
@@ -57,10 +57,10 @@
                         :data="parentTerms"
                         field="name"
                         clearable
-                        v-model:value="parentTermName"
+                        v-model="parentTermName"
                         @select="onSelectParentTerm($event)"
                         :loading="isFetchingParentTerms"
-                        @input="fetchParentTerms"
+                        @update:model-value="fetchParentTerms"
                         @focus="clearErrors('parent');"
                         :disabled="!hasParent"
                         check-infinite-scroll
@@ -93,8 +93,7 @@
                     <button
                             type="button"
                             class="wp-block-button__link wp-element-button"
-                            @click.prevent="cancelEdition()"
-                            slot="trigger">
+                            @click.prevent="cancelEdition()">
                         {{ $i18n.get('cancel') }}
                     </button>
                 </div>
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue
index 38dfb930c..18a46d1c8 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue
@@ -2,7 +2,7 @@
     <div v-if="collectionId">
         <b-loading
                 :is-full-page="false"
-                v-model:active="isLoading"
+                v-model="isLoading"
                 :can-cancel="false"/>
 
         <template v-if="couldLoadCollection && collecionAllowsItemSubmission">
@@ -50,7 +50,7 @@
                                 <b-upload
                                         expanded
                                         v-if="!form.document"
-                                        v-model:value="form.document"
+                                        v-model="form.document"
                                         drag-drop>
                                     <section class="section">
                                         <div class="content has-text-centered">
@@ -85,21 +85,21 @@
                             <div v-if="form.document_type == 'text'">
                                 <b-input
                                         type="textarea"
-                                        v-model:value="form.document" />
+                                        v-model="form.document" />
                                 <br v-if="hasMoreThanOneDocumentTypeOption">
                             </div>
                             <div v-if="form.document_type == 'url'">
                                 <b-input
                                         :placeholder="$i18n.get('instruction_insert_url')"
                                         type="url"
-                                        v-model:value="form.document" />
+                                        v-model="form.document" />
                                 <b-field
                                         :addons="false"
                                         :label="$i18n.get('label_document_option_forced_iframe')">
                                         &nbsp;
                                     <b-switch
                                             size="is-small"
-                                            v-model:value="form.document_options.forced_iframe" />
+                                            v-model="form.document_options.forced_iframe" />
                                     <help-button
                                             :title="$i18n.get('label_document_option_forced_iframe')"
                                             :message="$i18n.get('info_document_option_forced_iframe')" />
@@ -114,7 +114,7 @@
                                                 :aria-minus-label="$i18n.get('label_decrease')"
                                                 :aria-plus-label="$i18n.get('label_increase')"
                                                 min="1"
-                                                v-model:value="form.document_options.forced_iframe_width"
+                                                v-model="form.document_options.forced_iframe_width"
                                                 step="1" />
                                     </b-field>
                                     <b-field
@@ -124,7 +124,7 @@
                                                 :aria-minus-label="$i18n.get('label_decrease')"
                                                 :aria-plus-label="$i18n.get('label_increase')"
                                                 min="1"
-                                                v-model:value="form.document_options.forced_iframe_height"
+                                                v-model="form.document_options.forced_iframe_height"
                                                 step="1" />
                                     </b-field>
                                 </b-field>
@@ -141,7 +141,7 @@
                                         &nbsp;
                                     <b-switch
                                             size="is-small"
-                                            v-model:value="form.document_options.is_image" />
+                                            v-model="form.document_options.is_image" />
                                     <help-button
                                             :title="$i18n.get('label_document_option_is_image')"
                                             :message="$i18n.get('info_document_option_is_image')" />
@@ -226,7 +226,7 @@
                             <b-switch
                                     id="tainacan-checkbox-show-thumbnail-input"
                                     size="is-small"
-                                    v-model:value="showThumbnailInput">
+                                    v-model="showThumbnailInput">
                                 {{ $i18n.get('label_upload_custom_thumbnail') }}
                             </b-switch>
                         </div>
@@ -238,7 +238,7 @@
                         <b-upload
                                 expanded
                                 v-if="!form.thumbnail"
-                                v-model:value="form.thumbnail"
+                                v-model="form.thumbnail"
                                 drag-drop>
                             <section class="section">
                                 <div class="content has-text-centered">
@@ -311,7 +311,7 @@
                             id="tainacan-item-metadatum_id-attachments">
                         <b-upload
                                 expanded
-                                v-model:value="form.attachments"
+                                v-model="form.attachments"
                                 multiple
                                 drag-drop>
                             <section class="section">
@@ -383,7 +383,7 @@
                                     size="is-small"
                                     true-value="open"
                                     false-value="closed"
-                                    v-model:value="form.comment_status">
+                                    v-model="form.comment_status">
                                 {{ $i18n.get('label_allow_comments') }}
                             </b-switch>
                         </div>
@@ -420,7 +420,7 @@
                 <component
                         v-if="metadataSections.length"
                         :is="showSteppedLayout ? 'b-steps' : 'div'" 
-                        v-model:value="activeSectionStep"
+                        v-model="activeSectionStep"
                         :has-navigation="false"
                         type="is-secondary"
                         mobile-mode="compact"
@@ -588,7 +588,7 @@
                         class="terms-agreement-confirmation-section">
                     <b-field>
                         <b-checkbox
-                                v-model:value="userHasAgreedToTerms"
+                                v-model="userHasAgreedToTerms"
                                 size="is-medium">
                             <span v-html="termsAgreementMessage" />
                         </b-checkbox>