diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
index 8aa98b4d00..33dce8041e 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
@@ -2,6 +2,7 @@
     <ResourceList
         v-if="routeAction === 'list'"
         :instancedResource="instancedResource"
+        :key="instancedResource.refreshTemplate"
         @select-resource="$emit('select-resource', $event)"
     >
         <template #toolbar="{ resource, componentPropData }">
@@ -25,6 +26,7 @@
     <ResourceShow
         v-if="routeAction === 'show'"
         :instancedResource="instancedResource"
+        :key="instancedResource.refreshTemplate"
     >
         <template #toolbar="{ resource, componentPropData }">
             <Toolbar
@@ -39,6 +41,7 @@
     <ResourceFormAdd
         v-if="['add', 'edit'].includes(routeAction)"
         :instancedResource="instancedResource"
+        :key="instancedResource.refreshTemplate"
     />
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js b/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js
index e937961408..6e06ff893c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-resource.js
@@ -1,4 +1,4 @@
-import { computed, inject } from "vue";
+import { computed, inject, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { $__ } from "../i18n";
 import { build_url } from "../composables/datatables";
@@ -455,16 +455,6 @@ export function useBaseResource(instancedResource) {
     const getTableFilterFormElements = () => {
         return [];
     };
-    /**
-     * Toggle the refreshTemplate flag of the resource.
-     * This flag is used to force a reload of the template by Vue.
-     * It is typically used when the data of the resource has been updated.
-     *
-     * @return {void}
-     */
-    const refreshTemplateState = () => {
-        instancedResource.refreshTemplate = !instancedResource.refreshTemplate;
-    };
 
     /**
      * A function that returns a set of buttons to display in the toolbar, based on the current resource and component.
@@ -574,6 +564,18 @@ export function useBaseResource(instancedResource) {
         return !!instancedResource.extendedAttributesResourceType;
     });
 
+    const refreshTemplate = ref(0);
+    /**
+     * Toggle the refreshTemplate flag of the resource.
+     * This flag is used to force a reload of the template by Vue.
+     * It is typically used when the data of the resource has been updated.
+     *
+     * @return {void}
+     */
+    const refreshTemplateState = () => {
+        refreshTemplate.value++;
+    };
+
     return {
         ...instancedResource,
         getFilterValues,
@@ -597,6 +599,7 @@ export function useBaseResource(instancedResource) {
         getTableFilterFormElementsLabel,
         getTableFilterFormElements,
         refreshTemplateState,
+        refreshTemplate,
         resourceNamePlural,
         hasAdditionalFields,
         newResource,