diff --git a/routes/_components/Toast.html b/routes/_components/Toast.html
index 85077404..7d49022e 100644
--- a/routes/_components/Toast.html
+++ b/routes/_components/Toast.html
@@ -44,7 +44,7 @@
   }
 </style>
 <script>
-  import { splice, push } from 'svelte-extras'
+  import { splice, push, observe } from 'svelte-extras'
 
   const TIME_TO_SHOW_TOAST = 5000
   const DELAY_BETWEEN_TOASTS = 1000
@@ -65,6 +65,7 @@
       messages: []
     }),
     methods: {
+      observe,
       push,
       splice,
       say (text) {
diff --git a/routes/_components/compose/ComposeAutosuggest.html b/routes/_components/compose/ComposeAutosuggest.html
index 40d94f98..d92d9343 100644
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/routes/_components/compose/ComposeAutosuggest.html
@@ -47,6 +47,7 @@
   import {
     searchAccountsByUsername as searchAccountsByUsernameInDatabase
   } from '../../_database/accountsAndRelationships'
+  import { observe } from 'svelte-extras'
 
   const SEARCH_RESULTS_LIMIT = 4
   const DATABASE_SEARCH_RESULTS_LIMIT = 30
@@ -107,6 +108,7 @@
       })
     },
     methods: {
+      observe,
       once,
       onClick (item) {
         this.fire('autosuggestItemSelected')
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index 4e7f93fc..e92717f2 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -115,6 +115,7 @@
   import { postStatus, insertHandleForReply, setReplySpoiler, setReplyVisibility } from '../../_actions/compose'
   import { importShowComposeDialog } from '../dialog/asyncDialogs'
   import { classname } from '../../_utils/classname'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -191,6 +192,7 @@
       slide
     },
     methods: {
+      observe,
       async onClickPostButton () {
         let { sticky } = this.get()
         if (sticky) {
diff --git a/routes/_components/compose/ComposeContentWarning.html b/routes/_components/compose/ComposeContentWarning.html
index 68bd270d..69dad393 100644
--- a/routes/_components/compose/ComposeContentWarning.html
+++ b/routes/_components/compose/ComposeContentWarning.html
@@ -17,6 +17,7 @@
   import { store } from '../../_store/store'
   import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -28,6 +29,7 @@
       rawText: ''
     }),
     methods: {
+      observe,
       setupSyncFromStore () {
         this.observe('contentWarning', contentWarning => {
           this.set({rawText: contentWarning})
diff --git a/routes/_components/compose/ComposeInput.html b/routes/_components/compose/ComposeInput.html
index 2db927ab..68a535f6 100644
--- a/routes/_components/compose/ComposeInput.html
+++ b/routes/_components/compose/ComposeInput.html
@@ -35,6 +35,7 @@
   import { selectionChange } from '../../_utils/events'
   import { clickSelectedAutosuggestionUsername } from '../../_actions/compose'
   import { clickSelectedAutosuggestionEmoji } from '../../_actions/emoji'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -46,6 +47,7 @@
       this.teardownAutosize()
     },
     methods: {
+      observe,
       setupSyncFromStore () {
         let textarea = this.refs.textarea
         let firstTime = true
diff --git a/routes/_components/compose/ComposeLengthGauge.html b/routes/_components/compose/ComposeLengthGauge.html
index b9989f22..1b7dd084 100644
--- a/routes/_components/compose/ComposeLengthGauge.html
+++ b/routes/_components/compose/ComposeLengthGauge.html
@@ -22,6 +22,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { store } from '../../_store/store'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -49,6 +50,9 @@
         let int = Math.round(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
         return (int - (int % 2)) / 100
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeLengthIndicator.html b/routes/_components/compose/ComposeLengthIndicator.html
index f4e4c4ab..6f5e6c70 100644
--- a/routes/_components/compose/ComposeLengthIndicator.html
+++ b/routes/_components/compose/ComposeLengthIndicator.html
@@ -20,6 +20,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { store } from '../../_store/store'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -48,6 +49,9 @@
           return `${lengthToDisplayDeferred} characters remaining`
         }
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeMediaItem.html b/routes/_components/compose/ComposeMediaItem.html
index 7765217e..898d7c7a 100644
--- a/routes/_components/compose/ComposeMediaItem.html
+++ b/routes/_components/compose/ComposeMediaItem.html
@@ -79,6 +79,7 @@
   import { deleteMedia } from '../../_actions/media'
   import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -90,6 +91,7 @@
     }),
     store: () => store,
     methods: {
+      observe,
       setupSyncFromStore () {
         this.observe('mediaDescriptions', mediaDescriptions => {
           mediaDescriptions = mediaDescriptions || []
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualList.html b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
index 47e710cb..f8df7e23 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualList.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
@@ -23,6 +23,7 @@
   import { getRectFromEntry } from '../../_utils/getRectFromEntry'
   import { mark, stop } from '../../_utils/marks'
   import { pseudoVirtualListStore } from './pseudoVirtualListStore'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -75,6 +76,7 @@
       }
     },
     methods: {
+      observe,
       scrollToPosition (element) {
         let { scrolledToPosition } = this.get()
         if (scrolledToPosition) {
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
index 63dc61fe..209cfc6d 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
@@ -14,6 +14,7 @@
 <script>
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -48,6 +49,9 @@
         }
         return !isIntersecting && hide
       }
+    },
+    methods: {
+      observe
     }
   }
 </script>
diff --git a/routes/_components/status/StatusComposeBox.html b/routes/_components/status/StatusComposeBox.html
index c86c283f..056a9933 100644
--- a/routes/_components/status/StatusComposeBox.html
+++ b/routes/_components/status/StatusComposeBox.html
@@ -20,6 +20,7 @@
   import debounce from 'lodash-es/debounce'
   import throttle from 'lodash-es/throttle'
   import { on } from '../../_utils/eventBus'
+  import { observe } from 'svelte-extras'
 
   const DEBOUNCE_DELAY = 400
   const THROTTLE_DELAY = 150
@@ -34,6 +35,7 @@
       composeData: ($currentComposeData, originalStatusId) => $currentComposeData[originalStatusId] || {}
     },
     methods: {
+      observe,
       onPostedStatus (realm) {
         let { originalStatusId } = this.get()
         if (realm !== originalStatusId) {
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 545c9876..ea1193ca 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -57,6 +57,7 @@
   import { mark, stop } from '../../_utils/marks'
   import isEqual from 'lodash-es/isEqual'
   import { doubleRAF } from '../../_utils/doubleRAF'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -150,6 +151,7 @@
       blurWithCapture
     },
     methods: {
+      observe,
       initialize () {
         let { initializeStarted } = this.get()
         if (initializeStarted) {
diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index 4ea2d3e7..60153fca 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -32,6 +32,7 @@
   import throttle from 'lodash-es/throttle'
   import { mark, stop } from '../../_utils/marks'
   import isEqual from 'lodash-es/isEqual'
+  import { observe } from 'svelte-extras'
 
   const DISTANCE_FROM_BOTTOM_TO_FIRE = 800
   const SCROLL_EVENT_THROTTLE = 1000
@@ -108,6 +109,7 @@
       allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
     },
     methods: {
+      observe,
       calculateListOffset () {
         // TODO: better way to get the offset top?
         let node = this.refs.node
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index 3d64ca79..daf10b62 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -7,6 +7,7 @@
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { isMobile } from '../../_utils/isMobile'
   import { doubleRAF } from '../../_utils/doubleRAF'
+  import { observe } from 'svelte-extras'
 
   const SCROLL_EVENT_DELAY = 300
 
@@ -60,6 +61,7 @@
     },
     store: () => virtualListStore,
     methods: {
+      observe,
       setupScroll (node) {
         if (!node) {
           return
diff --git a/routes/_components/virtualList/VirtualListHeader.html b/routes/_components/virtualList/VirtualListHeader.html
index baecc2be..3c726a7d 100644
--- a/routes/_components/virtualList/VirtualListHeader.html
+++ b/routes/_components/virtualList/VirtualListHeader.html
@@ -24,6 +24,7 @@
   import { virtualListStore } from './virtualListStore'
   import { doubleRAF } from '../../_utils/doubleRAF'
   import { mark, stop } from '../../_utils/marks'
+  import { observe } from 'svelte-extras'
 
   export default {
     oncreate () {
@@ -41,6 +42,7 @@
     }),
     store: () => virtualListStore,
     methods: {
+      observe,
       doCalculateHeight () {
         let { heightCalculated } = this.get()
         if (heightCalculated) { // only need to calculate once, it never changes