diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 68fb010..b41deef 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -74,6 +74,12 @@
       imgLoad,
       imgLoadError
     },
+    data: () => ({
+      className: void 0,
+      loaded: false,
+      error: void 0,
+      isLink: false
+    }),
     store: () => store,
     computed: {
       computedClass: (className, loaded, size) => (classname(
diff --git a/routes/_components/DynamicPageBanner.html b/routes/_components/DynamicPageBanner.html
index 7aab3fe..d454692 100644
--- a/routes/_components/DynamicPageBanner.html
+++ b/routes/_components/DynamicPageBanner.html
@@ -60,6 +60,9 @@
 </style>
 <script>
   export default {
+    data: () => ({
+      icon: void 0
+    }),
     methods: {
       onGoBack (e) {
         e.preventDefault()
diff --git a/routes/_components/ExternalLink.html b/routes/_components/ExternalLink.html
index bf97cac..a2d5954 100644
--- a/routes/_components/ExternalLink.html
+++ b/routes/_components/ExternalLink.html
@@ -22,4 +22,11 @@
   .external-link-with-icon.normal-icon-color .external-link-svg {
     fill: var(--body-text-color);
   }
-</style>
\ No newline at end of file
+</style>
+<script>
+  export default {
+    data: () => ({
+      normalIconColor: false
+    })
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html
index 1430eb3..569e0b1 100644
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@@ -105,6 +105,17 @@
   import { store } from '../_store/store'
 
   export default {
+    data: () => ({
+      big: false,
+      muted: false,
+      disabled: false,
+      svgClassName: void 0,
+      focusKey: void 0,
+      pressable: false,
+      pressed: false,
+      className: void 0,
+      delegateKey: void 0
+    }),
     store: () => store,
     computed: {
       computedClass: (pressable, pressed, big, muted, className) => {
diff --git a/routes/_components/LazyImage.html b/routes/_components/LazyImage.html
index 2b52970..9d8191d 100644
--- a/routes/_components/LazyImage.html
+++ b/routes/_components/LazyImage.html
@@ -45,6 +45,11 @@
       }
       img.src = src
       stop('LazyImage oncreate()')
-    }
+    },
+    data: () => ({
+      displaySrc: void 0,
+      hidden: false,
+      ariaHidden: false
+    })
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/LoadingPage.html b/routes/_components/LoadingPage.html
index 4d64468..80a8e2c 100644
--- a/routes/_components/LoadingPage.html
+++ b/routes/_components/LoadingPage.html
@@ -26,6 +26,9 @@
         this.set({shown: true})
       }, SPINNER_DELAY)
     },
+    data: () => ({
+      shown: false
+    }),
     components: {
       LoadingSpinner
     }
diff --git a/routes/_components/LoadingSpinner.html b/routes/_components/LoadingSpinner.html
index 5b78ff6..2da3ac1 100644
--- a/routes/_components/LoadingSpinner.html
+++ b/routes/_components/LoadingSpinner.html
@@ -1,5 +1,5 @@
 <svg class="loading-spinner-icon spin {{maskStyle ? 'mask-style' : ''}}"
-     style="width: {{size || 64}}px; height: {{size || 64}}px;"
+     style="width: {{size}}px; height: {{size}}px;"
      aria-label="Loading"
 >
   <use xlink:href="#fa-spinner" />
@@ -12,4 +12,12 @@
   .loading-spinner-icon.mask-style {
     fill: var(--mask-svg-fill);
   }
-</style>
\ No newline at end of file
+</style>
+<script>
+  export default {
+    data: () => ({
+      maskStyle: false,
+      size: 64
+    })
+  }
+</script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeAutosuggest.html b/routes/_components/compose/ComposeAutosuggest.html
index 39fd5db..40d94f9 100644
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/routes/_components/compose/ComposeAutosuggest.html
@@ -107,7 +107,7 @@
       })
     },
     methods: {
-      once: once,
+      once,
       onClick (item) {
         this.fire('autosuggestItemSelected')
         let { realm } = this.get()
@@ -147,7 +147,7 @@
         if (!thisComposeFocused) {
           return
         }
-        let selectionStart = composeSelectionStartDeferred || 0
+        let selectionStart = composeSelectionStartDeferred
         if (!text || selectionStart < MIN_PREFIX_LENGTH) {
           return
         }
@@ -162,6 +162,10 @@
           searchResults.length)
       }
     },
+    data: () => ({
+      composeFocusedDeferred: void 0,
+      composeSelectionStartDeferred: 0
+    }),
     store: () => store,
     components: {
       ComposeAutosuggestionList
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index b8d7d09..4e7f93f 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -151,6 +151,13 @@
       ComposeMedia,
       ComposeContentWarning
     },
+    data: () => ({
+      size: void 0,
+      isReply: false,
+      autoFocus: false,
+      sticky: false,
+      hideBottomBorder: false
+    }),
     store: () => store,
     computed: {
       computedClassName: (overLimit, realm, size, postPrivacyKey, isReply) => (classname(
diff --git a/routes/_components/compose/ComposeLengthGauge.html b/routes/_components/compose/ComposeLengthGauge.html
index 5408b87..b9989f2 100644
--- a/routes/_components/compose/ComposeLengthGauge.html
+++ b/routes/_components/compose/ComposeLengthGauge.html
@@ -1,5 +1,5 @@
 <div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}}  {{overLimit ? 'over-char-limit' : ''}}"
-     style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
+     style="transform: scaleX({{lengthAsFractionDeferred}});"
      aria-hidden="true"
 ></div>
 <style>
@@ -38,6 +38,10 @@
         })
       }, {init: false})
     },
+    data: () => ({
+      shouldAnimate: false,
+      lengthAsFractionDeferred: 0
+    }),
     store: () => store,
     computed: {
       lengthAsFraction: (length) => {
@@ -46,5 +50,5 @@
         return (int - (int % 2)) / 100
       }
     }
-}
+  }
 </script>
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeLengthIndicator.html b/routes/_components/compose/ComposeLengthIndicator.html
index 3e17500..f4e4c4a 100644
--- a/routes/_components/compose/ComposeLengthIndicator.html
+++ b/routes/_components/compose/ComposeLengthIndicator.html
@@ -1,6 +1,6 @@
 <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
       aria-label={{lengthLabel}}>
-      {{lengthToDisplayDeferred || '0'}}
+      {{lengthToDisplayDeferred}}
     </span>
 <style>
   .compose-box-length {
@@ -35,6 +35,9 @@
         })
       }, {init: false})
     },
+    data: () => ({
+      lengthToDisplayDeferred: 0
+    }),
     store: () => store,
     computed: {
       lengthToDisplay: (length) => CHAR_LIMIT - length,
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualList.html b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
index cacb612..47e710c 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualList.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualList.html
@@ -124,6 +124,9 @@
     components: {
       PseudoVirtualListLazyItem
     },
+    data: () => ({
+      intersectionObserver: void 0
+    }),
     store: () => pseudoVirtualListStore
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
index 019145d..63dc61f 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
@@ -38,6 +38,9 @@
       let { intersectionObserver } = this.get()
       intersectionObserver.observe(this.refs.node)
     },
+    data: () => ({
+      hide: false
+    }),
     computed: {
       shouldHide: (isIntersecting, isCached, hide) => {
         if (isCached) {
diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
index 964cbe1..00eeed5 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
@@ -25,6 +25,9 @@
         stop('PseudoVirtualListLazyItem set props')
       }
     },
+    data: () => ({
+      props: void 0
+    }),
     components: {
       PseudoVirtualListItem
     }
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index cbcfb68..08a05ac 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -155,7 +155,8 @@
       }
     },
     data: () => ({
-      oneTransparentPixel: ONE_TRANSPARENT_PIXEL
+      oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
+      mouseover: void 0
     }),
     store: () => store,
     events: {
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 2dda64e..faccbae 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -138,6 +138,11 @@
       StatusSpoiler,
       StatusComposeBox
     },
+    data: () => ({
+      notification: void 0,
+      replyVisibility: void 0,
+      contentPreloaded: false
+    }),
     store: () => store,
     methods: {
       onClickOrKeydown (e) {
diff --git a/routes/_components/timeline/LazyTimeline.html b/routes/_components/timeline/LazyTimeline.html
index 2e1b529..ed665d4 100644
--- a/routes/_components/timeline/LazyTimeline.html
+++ b/routes/_components/timeline/LazyTimeline.html
@@ -1,5 +1,6 @@
 <div class="lazy-timeline">
   {{#await importTimeline}}
+    <!-- awaiting promise -->
   {{then constructor}}
     <:Component {constructor} :timeline />
   {{catch error}}
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 0cc4cfd..545c987 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -5,6 +5,7 @@
      on:blurWithCapture="clearFocus(event)"
 >
   {{#await componentsPromise}}
+    <!-- awaiting promise -->
   {{then result}}
     <:Component {result.listComponent}
                 component={{result.listItemComponent}}
diff --git a/routes/_components/virtualList/VirtualListHeader.html b/routes/_components/virtualList/VirtualListHeader.html
index 855437f..baecc2b 100644
--- a/routes/_components/virtualList/VirtualListHeader.html
+++ b/routes/_components/virtualList/VirtualListHeader.html
@@ -36,6 +36,9 @@
         }
       }, {init: false})
     },
+    data: () => ({
+      fadedIn: false
+    }),
     store: () => virtualListStore,
     methods: {
       doCalculateHeight () {
diff --git a/routes/_components/virtualList/VirtualListLazyItem.html b/routes/_components/virtualList/VirtualListLazyItem.html
index 3e0e6ab..6310a03 100644
--- a/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/routes/_components/virtualList/VirtualListLazyItem.html
@@ -20,6 +20,9 @@
         stop('VirtualListLazyItem set props')
       }
     },
+    data: () => ({
+      props: void 0
+    }),
     components: {
       VirtualListItem
     }
diff --git a/routes/_pages/settings/instances/[instanceName].html b/routes/_pages/settings/instances/[instanceName].html
index f94d3e3..239d276 100644
--- a/routes/_pages/settings/instances/[instanceName].html
+++ b/routes/_pages/settings/instances/[instanceName].html
@@ -105,22 +105,21 @@
   import { themes } from '../../../_static/themes'
 
   export default {
-    components: {
-      SettingsLayout,
-      ExternalLink,
-      Avatar
+    async oncreate () {
+      let { instanceName } = this.get()
+      let { instanceThemes } = this.store.get()
+      this.set({
+        selectedTheme: instanceThemes[instanceName] || 'default'
+      })
+      await updateVerifyCredentialsForInstance(instanceName)
     },
     store: () => store,
     data: () => ({
-      themes: themes
+      themes: themes,
+      selectedTheme: 'default'
     }),
-    async oncreate () {
-      let { instanceName } = this.get()
-      await updateVerifyCredentialsForInstance(instanceName)
-    },
     computed: {
       instanceName: (params) => params.instanceName,
-      selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName] || 'default',
       verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
     },
     methods: {
@@ -145,6 +144,11 @@
           }
         })
       }
+    },
+    components: {
+      SettingsLayout,
+      ExternalLink,
+      Avatar
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_utils/events.js b/routes/_utils/events.js
index 4d34e77..f853d1e 100644
--- a/routes/_utils/events.js
+++ b/routes/_utils/events.js
@@ -2,7 +2,7 @@ export function imgLoadError (node, callback) {
   node.addEventListener('error', callback)
 
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('error', callback)
     }
   }
@@ -12,7 +12,7 @@ export function imgLoad (node, callback) {
   node.addEventListener('load', callback)
 
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('load', callback)
     }
   }
@@ -28,7 +28,7 @@ export function mouseover (node, callback) {
   node.addEventListener('mouseenter', onMouseEnter)
   node.addEventListener('mouseleave', onMouseLeave)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('mouseenter', onMouseEnter)
       node.removeEventListener('mouseleave', onMouseLeave)
     }
@@ -38,7 +38,7 @@ export function mouseover (node, callback) {
 export function focusWithCapture (node, callback) {
   node.addEventListener('focus', callback, true)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('focus', callback, true)
     }
   }
@@ -47,7 +47,7 @@ export function focusWithCapture (node, callback) {
 export function blurWithCapture (node, callback) {
   node.addEventListener('blur', callback, true)
   return {
-    teardown () {
+    destroy () {
       node.removeEventListener('blur', callback, true)
     }
   }
@@ -62,7 +62,7 @@ export function selectionChange (node, callback) {
     node.addEventListener(event, listener)
   }
   return {
-    teardown () {
+    destroy () {
       for (let event of events) {
         node.removeEventListener(event, listener)
       }
diff --git a/webpack.client.config.js b/webpack.client.config.js
index 78aa2f3..806dda3 100644
--- a/webpack.client.config.js
+++ b/webpack.client.config.js
@@ -23,11 +23,12 @@ module.exports = {
         use: {
           loader: 'svelte-loader',
           options: {
+            dev: isDev,
             hydratable: true,
             emitCss: !isDev,
             cascade: false,
             store: true,
-            hot: isDev
+            hotReload: isDev
           }
         }
       },