diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index f497cbd..3ceca96 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -757,7 +757,17 @@ export default {
       let lastDisplayedEvent = undefined;
       events = events.flatMap((e) => {
         let result = [];
-        e.component = this.componentForEvent(e, false);
+        if (e.isEncrypted()) {
+          if (e.getClearContent()) {
+            e.component = this.componentForEvent(e, false);
+          } else {
+            this.$matrix.matrixClient.decryptEventIfNeeded(e).then(() => {
+              e.component = this.componentForEvent(e, false);
+            });
+          }
+        } else {
+          e.component = this.componentForEvent(e, false);
+        }
         if (e.getId() == this.readMarker && showReadMarker) {
           const readMarkerEvent = ROOM_READ_MARKER_EVENT_PLACEHOLDER;
           readMarkerEvent["component"] = this.componentForEvent(readMarkerEvent, false);
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index caf8f31..8d6487e 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -71,7 +71,7 @@ export default {
         console.log("Failed to fetch thumbnail: ", err);
       });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;
diff --git a/src/components/messages/MessageIncomingThread.vue b/src/components/messages/MessageIncomingThread.vue
index 4bb35a8..7364600 100644
--- a/src/components/messages/MessageIncomingThread.vue
+++ b/src/components/messages/MessageIncomingThread.vue
@@ -31,8 +31,8 @@
     <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-incoming>
   <component v-else-if="items.length == 1" :is="componentFn(items[0].event)" 
-    :originalEvent="items[0].event"
     v-bind="{...$props, ...$attrs}"
+    :originalEvent="items[0].event"
   />
 </template>
 
@@ -43,6 +43,7 @@ import util, { ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE } from "../../plugins/util
 import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
 import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import SwipeableThumbnailsView from "./channel/SwipeableThumbnailsView.vue";
+import { reactive } from "vue";
 
 export default {
   extends: MessageIncoming,
@@ -61,7 +62,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   computed: {
@@ -82,19 +83,18 @@ export default {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
           .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
-            let ret = {
+            let ret = reactive({
               event: e,
               src: null,
-            };
-            ret.promise =
-              util
-                .getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
-                .then((url) => {
-                  ret.src = url;
-                })
-                .catch((err) => {
-                  console.log("Failed to fetch thumbnail: ", err);
-                });
+            });
+            ret.promise = this.$matrix.matrixClient.decryptEventIfNeeded(e)
+              .then(() => util.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100))
+              .then((url) => {
+                ret.src = url;
+              })
+              .catch((err) => {
+                console.log("Failed to fetch thumbnail: ", err);
+              });
             return ret;
           });
       }, this.$el);
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index 89c4c1c..b198b9f 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -70,7 +70,7 @@ export default {
         console.log("Failed to fetch thumbnail: ", err);
       });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;
diff --git a/src/components/messages/MessageOutgoingThread.vue b/src/components/messages/MessageOutgoingThread.vue
index 50a64ac..71e89eb 100644
--- a/src/components/messages/MessageOutgoingThread.vue
+++ b/src/components/messages/MessageOutgoingThread.vue
@@ -32,8 +32,8 @@
     <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-outgoing>
   <component v-else-if="items.length == 1" :is="componentFn(items[0].event)"
-    :originalEvent="items[0].event"
     v-bind="{...$props, ...$attrs}"
+    :originalEvent="items[0].event"
   />
 </template>
 
@@ -44,6 +44,7 @@ import util, { ROOM_TYPE_CHANNEL } from "../../plugins/utils";
 import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
 import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import SwipeableThumbnailsView from "./channel/SwipeableThumbnailsView.vue";
+import { reactive } from "vue";
 
 export default {
   extends: MessageOutgoing,
@@ -62,7 +63,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   computed: {
@@ -83,19 +84,18 @@ export default {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
           .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
-            let ret = {
+            let ret = reactive({
               event: e,
               src: null,
-            };
-            ret.promise =
-              util
-                .getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
-                .then((url) => {
-                  ret.src = url;
-                })
-                .catch((err) => {
-                  console.log("Failed to fetch thumbnail: ", err);
-                });
+            });
+            ret.promise = this.$matrix.matrixClient.decryptEventIfNeeded(e)
+              .then(() => util.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100))
+              .then((url) => {
+                ret.src = url;
+              })
+              .catch((err) => {
+                console.log("Failed to fetch thumbnail: ", err);
+              });
             return ret;
           });
       }, this.$el);
diff --git a/src/components/messages/export/MessageIncomingImageExport.vue b/src/components/messages/export/MessageIncomingImageExport.vue
index 0de1943..21c0ce7 100644
--- a/src/components/messages/export/MessageIncomingImageExport.vue
+++ b/src/components/messages/export/MessageIncomingImageExport.vue
@@ -32,7 +32,7 @@ export default {
       this.contain = true;
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;
diff --git a/src/components/messages/export/MessageIncomingThreadExport.vue b/src/components/messages/export/MessageIncomingThreadExport.vue
index a122984..7419344 100644
--- a/src/components/messages/export/MessageIncomingThreadExport.vue
+++ b/src/components/messages/export/MessageIncomingThreadExport.vue
@@ -25,7 +25,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   methods: {
diff --git a/src/components/messages/export/MessageOutgoingImageExport.vue b/src/components/messages/export/MessageOutgoingImageExport.vue
index acbc56c..2c3bc72 100644
--- a/src/components/messages/export/MessageOutgoingImageExport.vue
+++ b/src/components/messages/export/MessageOutgoingImageExport.vue
@@ -32,7 +32,7 @@ export default {
       this.contain = true;
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;
diff --git a/src/components/messages/export/MessageOutgoingThreadExport.vue b/src/components/messages/export/MessageOutgoingThreadExport.vue
index 6344269..18c0cc9 100644
--- a/src/components/messages/export/MessageOutgoingThreadExport.vue
+++ b/src/components/messages/export/MessageOutgoingThreadExport.vue
@@ -25,7 +25,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   methods: {
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index f8f214f..bcce0e7 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -52,7 +52,7 @@ export default {
       mcCustom: null
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.thread = null;
   },
   watch: {