refactor: converted PunishmentItem to composition API

frontend/src/components/PunishmentItem.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { ref, watch } from "vue";
+import { format, formatDistance, parseISO } from "date-fns";
+
+const store = useStore();
+
+const props = defineProps({
+	punishment: { type: Object, default: () => {} }
+});
+
+const active = ref(false);
+
+const closeModal = payload =>
+	store.dispatch("modalVisibility/closeModal", payload);
+
+watch(props.punishment, punishment => {
+	active.value =
+		punishment.active &&
+		new Date(punishment.expiresAt).getTime() > Date.now();
+});
+</script>
+
 <template>
 	<div class="universal-item punishment-item">
 		<div class="item-icon">
@@ -70,35 +93,6 @@
 	</div>
 </template>
 
-<script>
-import { mapActions } from "vuex";
-import { format, formatDistance, parseISO } from "date-fns";
-
-export default {
-	props: {
-		punishment: { type: Object, default: () => {} }
-	},
-	data() {
-		return {
-			active: false
-		};
-	},
-	watch: {
-		punishment(punishment) {
-			this.active =
-				punishment.active &&
-				new Date(this.punishment.expiresAt).getTime() > Date.now();
-		}
-	},
-	methods: {
-		formatDistance,
-		format,
-		parseISO,
-		...mapActions("modalVisibility", ["closeModal"])
-	}
-};
-</script>
-
 <style lang="less" scoped>
 .night-mode {
 	.punishment-item {