diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
index c459ec76b..fe7426981 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarBase.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
@@ -226,7 +226,7 @@ export default {
 
   created () {
     this.changeLocale(this.currentLanguage)
-    this.refreshBlock(this.refresh, true)
+    this.refreshBlock(this.refresh)
   },
 
   methods: {
@@ -350,7 +350,9 @@ export default {
 
     refresh () {
       this.refreshing = true
-      this.api().refetchEvents()
+      this.api().refetchEvents().then(() => {
+        this.key++
+      })
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/ChartBase.vue b/client/web/compose/src/components/PageBlocks/ChartBase.vue
index 419213df2..2f19e159f 100644
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@@ -38,7 +38,7 @@ export default {
 
   mounted () {
     this.fetchChart()
-    this.refreshBlock(this.refresh, true)
+    this.refreshBlock(this.refresh)
   },
 
   methods: {
@@ -46,7 +46,7 @@ export default {
       findChartByID: 'chart/findByID',
     }),
 
-    fetchChart (params = {}) {
+    async fetchChart (params = {}) {
       const { chartID } = this.options
 
       if (chartID === NoID) {
@@ -55,7 +55,7 @@ export default {
 
       const { namespaceID } = this.namespace
 
-      this.findChartByID({ chartID, namespaceID, ...params }).then((chart) => {
+      return this.findChartByID({ chartID, namespaceID, ...params }).then((chart) => {
         this.chart = chart
       }).catch(this.toastErrorHandler(this.$t('chart.loadFailed')))
     },
@@ -82,7 +82,9 @@ export default {
     },
 
     refresh () {
-      this.fetchChart({ force: true })
+      this.fetchChart({ force: true }).then(() => {
+        this.key++
+      })
     },
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue b/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
index aca960ff3..85e9aaa31 100644
--- a/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordOrganizerBase.vue
@@ -2,6 +2,7 @@
   <wrap
     v-bind="$props"
     v-on="$listeners"
+    @refreshBlock="refresh"
   >
     <template #default>
       <div
diff --git a/client/web/compose/src/components/PageBlocks/Report/Base.vue b/client/web/compose/src/components/PageBlocks/Report/Base.vue
index b61ae4b56..c8ca95719 100644
--- a/client/web/compose/src/components/PageBlocks/Report/Base.vue
+++ b/client/web/compose/src/components/PageBlocks/Report/Base.vue
@@ -2,6 +2,7 @@
   <wrap
     v-bind="$props"
     v-on="$listeners"
+    @refreshBlock="refresh"
   >
     <div
       v-if="processing"
@@ -57,18 +58,18 @@ export default {
   },
 
   created () {
-    this.refreshBlock(this.refresh, true)
+    this.refreshBlock(this.refresh)
   },
 
   methods: {
     fetchReport (reportID) {
       this.processing = true
 
-      this.$SystemAPI.reportRead({ reportID })
+      return this.$SystemAPI.reportRead({ reportID })
         .then(report => {
           this.report = new system.Report(report)
 
-          this.getDataframes()
+          return this.getDataframes()
         }).catch(this.toastErrorHandler(this.$t('notification:report.fetchFailed')))
         .finally(() => {
           this.processing = false
@@ -97,7 +98,7 @@ export default {
           const { dataframes: frames = [] } = element.reportDefinitions({ ...definition, ...scenarioDefinition })
 
           if (frames.length) {
-            this.$SystemAPI.reportRun({ frames, reportID: this.options.reportID })
+            return this.$SystemAPI.reportRun({ frames, reportID: this.options.reportID })
               .then(({ frames: dataframes = [] }) => {
                 this.displayElement = {
                   ...element,
@@ -133,7 +134,9 @@ export default {
     },
 
     refresh () {
-      this.fetchReport(this.options.reportID)
+      this.fetchReport(this.options.reportID).then(() => {
+        this.key++
+      })
     },
   },
 }
diff --git a/client/web/compose/src/components/PageBlocks/SocialFeedBase.vue b/client/web/compose/src/components/PageBlocks/SocialFeedBase.vue
index 9f47eafbc..dcf3fbbcd 100644
--- a/client/web/compose/src/components/PageBlocks/SocialFeedBase.vue
+++ b/client/web/compose/src/components/PageBlocks/SocialFeedBase.vue
@@ -2,7 +2,7 @@
   <wrap
     v-bind="$props"
     v-on="$listeners"
-    @refreshBlock="key++"
+    @refreshBlock="refresh"
   >
     <div
       v-if="profile"
@@ -57,7 +57,7 @@ export default {
   },
 
   mounted () {
-    this.refreshBlock(() => {}, true)
+    this.refreshBlock(this.refresh)
   },
 
   methods: {
@@ -109,6 +109,10 @@ export default {
         twitterHandle,
       }
     },
+
+    refresh () {
+      this.key++
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/base.vue b/client/web/compose/src/components/PageBlocks/base.vue
index f3327c7bd..e1aedd1c2 100644
--- a/client/web/compose/src/components/PageBlocks/base.vue
+++ b/client/web/compose/src/components/PageBlocks/base.vue
@@ -94,21 +94,14 @@ export default {
     /**
      *
      * @param {*} refreshFunction
-     * @param {*} forceRerender
-     * Key is used to force a component to re-render
-     * However, sometimes reloading data is enough
-     * Attach :key="key" if you need to re-render a component
-     *
+     * If reloading data does not refresh the page block
+     * You should attach :key="key" to it and increment it in the refreshFunction
      */
-    refreshBlock (refreshFunction, forceRerender) {
+    refreshBlock (refreshFunction) {
       if (!this.allowsRefresh || this.refreshInterval) return
 
       const interval = setInterval(() => {
         refreshFunction()
-
-        if (forceRerender) {
-          this.key++
-        }
       }, this.options.refreshRate * 1000)
 
       this.refreshInterval = interval