diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index d80a853e9..23506b997 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -5,46 +5,36 @@
 	</div>
 </template>
 
-<script>
+<script setup>
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {onBeforeUnmount, onMounted, ref} from 'vue'
 
-export default {
-	setup() {
-		const open = ref(false)
-		const popup = ref(null)
+const open = ref(false)
+const popup = ref(null)
 
-		const toggle = () => {
-			open.value = !open.value
-		}
-		
-		const hidePopup = e => {
-			if (!open.value) {
-				return
-			}
-
-			// we actually want to use popup.$el, not its value.
-			// eslint-disable-next-line vue/no-ref-as-operand
-			closeWhenClickedOutside(e, popup.value, () => {
-				open.value = false
-			})
-		}
-		
-		onMounted(() => {
-			document.addEventListener('click', hidePopup)
-		})
-		
-		onBeforeUnmount(() => {
-			document.removeEventListener('click', hidePopup)
-		})
-
-		return {
-			open,
-			toggle,
-			popup,
-		}
-	},
+const toggle = () => {
+	open.value = !open.value
 }
+
+const hidePopup = e => {
+	if (!open.value) {
+		return
+	}
+
+	// we actually want to use popup.$el, not its value.
+	// eslint-disable-next-line vue/no-ref-as-operand
+	closeWhenClickedOutside(e, popup.value, () => {
+		open.value = false
+	})
+}
+
+onMounted(() => {
+	document.addEventListener('click', hidePopup)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('click', hidePopup)
+})
 </script>
 
 <style scoped lang="scss">