diff --git a/frontend/.eslintignore b/frontend/.eslintignore
index 1f9fa6d86..8a18de949 100644
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,3 +1,2 @@
-vue/components/Public/WebDJ/Stream.js
-vue/components/Public/WebDJ/Track.js
+vue/components/Public/WebDJ/*
 vue/vendor/chartjs-colorschemes/*
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index e83ab16ac..f8c4dd468 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -4,16 +4,17 @@ module.exports = {
         'plugin:vue/vue3-recommended'
     ],
     rules: {
-        "vue/no-v-html": "off",
-        "vue/multi-word-component-names": "off",
         "no-unused-vars": ["error", {
             "varsIgnorePattern": "^_|props",
         }],
+        "vue/multi-word-component-names": "off",
         "vue/html-indent": ["error", 4, {
             "attribute": 1,
             "baseIndent": 1,
             "closeBracket": 0,
             "alignAttributesVertically": true
-        }]
+        }],
+        "vue/no-v-html": "off",
+        "vue/no-mutating-props": "off"
     }
 }
diff --git a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
index 44c5c04ad..c055f4632 100644
--- a/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
+++ b/frontend/vue/components/Admin/Permissions/Form/StationForm.vue
@@ -51,6 +51,7 @@ const props = defineProps({
     }
 });
 
+
 const remainingStations = computed(() => {
     return pickBy(props.stations, (stationName, stationId) => {
         return !find(props.form.permissions.$model.station, {'station_id': stationId});
@@ -61,6 +62,7 @@ const hasRemainingStations = computed(() => {
     return !isEmpty(remainingStations.value);
 });
 
+
 const remove = (index) => {
     props.form.permissions.$model.station.splice(index, 1);
 };
diff --git a/frontend/vue/components/Common/BaseEditModal.vue b/frontend/vue/components/Common/BaseEditModal.vue
index c9d62d158..e68411faa 100644
--- a/frontend/vue/components/Common/BaseEditModal.vue
+++ b/frontend/vue/components/Common/BaseEditModal.vue
@@ -9,7 +9,7 @@ import mergeExisting from "~/functions/mergeExisting";
 
 export default {
     name: 'BaseEditModal',
-    components: {ModalForm},
+    components: {ModalForm}, // eslint-disable-line
     props: {
         createUrl: {
             type: String,
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index e3ec49ff5..d56293e3b 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -92,6 +92,7 @@
                                 <b-dropdown-form class="pt-3">
                                     <div
                                         v-for="field in selectableFields"
+                                        :key="field.key"
                                         class="form-group"
                                     >
                                         <div class="custom-control custom-checkbox">
@@ -147,7 +148,7 @@
                 @refreshed="onRefreshed"
                 @sort-changed="onSortChanged"
             >
-                <template #head(selected)="data">
+                <template #head(selected)>
                     <b-form-checkbox
                         :aria-label="$gettext('Select all visible rows')"
                         :checked="allSelected"
@@ -274,13 +275,11 @@ export default defineComponent({
         },
         requestConfig: {
             type: Function,
-            default: () => {
-            }
+            default: null
         },
         requestProcess: {
             type: Function,
-            default: () => {
-            }
+            default: null
         }
     },
     emits: [
@@ -361,7 +360,6 @@ export default defineComponent({
         },
         itemProvider() {
             if (this.items !== null) {
-                this.totalRows = this.items.length;
                 return this.items;
             }
 
@@ -371,6 +369,11 @@ export default defineComponent({
         }
     },
     watch: {
+        items(newVal) {
+            if (newVal !== null) {
+                this.totalRows = newVal.length;
+            }
+        },
         filter() {
             this.currentPage = 1;
         }
diff --git a/frontend/vue/components/Common/ScheduleView.vue b/frontend/vue/components/Common/ScheduleView.vue
index 51a4785b5..914c4be98 100644
--- a/frontend/vue/components/Common/ScheduleView.vue
+++ b/frontend/vue/components/Common/ScheduleView.vue
@@ -30,7 +30,7 @@ const emit = defineEmits(['click']);
 const onEventDidMount = (info) => {
     let desc = info?.event?.extendedProps?.description || null;
     if (desc !== null) {
-        // eslint-ignore-line no-undef
+        /* eslint-disable no-undef */
         $(info.el).tooltip({
             title: desc,
             placement: 'top',
@@ -38,6 +38,7 @@ const onEventDidMount = (info) => {
             container: 'body',
             offset: 0
         });
+        /* eslint-enable */
     }
 };
 
diff --git a/frontend/vue/components/Dashboard.vue b/frontend/vue/components/Dashboard.vue
index 78236ea4b..749c76782 100644
--- a/frontend/vue/components/Dashboard.vue
+++ b/frontend/vue/components/Dashboard.vue
@@ -46,6 +46,7 @@
             <template v-if="!notificationsLoading && notifications.length > 0">
                 <div
                     v-for="notification in notifications"
+                    :key="notification.title"
                     class="card-body d-flex align-items-center"
                     :class="'alert-'+notification.type"
                     role="alert"
diff --git a/frontend/vue/components/Form/VuelidateError.vue b/frontend/vue/components/Form/VuelidateError.vue
index b03c41752..47f7e09b4 100644
--- a/frontend/vue/components/Form/VuelidateError.vue
+++ b/frontend/vue/components/Form/VuelidateError.vue
@@ -1,6 +1,9 @@
 <template>
     <div style="display: contents">
-        <div v-for="message in errorMessages">
+        <div
+            v-for="message in errorMessages"
+            :key="message"
+        >
             {{ message }}
         </div>
     </div>
diff --git a/frontend/vue/components/Public/FullPlayer/SongHistory.vue b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
index b2f5e63b7..4a8cb79e3 100644
--- a/frontend/vue/components/Public/FullPlayer/SongHistory.vue
+++ b/frontend/vue/components/Public/FullPlayer/SongHistory.vue
@@ -5,6 +5,7 @@
         </p>
         <div
             v-for="(row, index) in history"
+            :key="row.sh_id"
             class="song"
         >
             <strong class="order">{{ history.length - index }}</strong>
diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue
index 9e85a2291..fba4cbd94 100644
--- a/frontend/vue/components/Public/Player.vue
+++ b/frontend/vue/components/Public/Player.vue
@@ -106,6 +106,7 @@
                     >
                         <a
                             v-for="stream in streams"
+                            :key="stream.url"
                             class="dropdown-item"
                             href="javascript:"
                             @click.prevent="switchStream(stream)"
@@ -157,7 +158,7 @@ import AudioPlayer from '~/components/Common/AudioPlayer';
 import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {computed, onMounted, ref, shallowRef, watch} from "vue";
-import {useMounted, useStorage} from "@vueuse/core";
+import {useStorage} from "@vueuse/core";
 import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
 import useNowPlaying from "~/functions/useNowPlaying";
diff --git a/frontend/vue/components/Stations/Media.vue b/frontend/vue/components/Stations/Media.vue
index 165129544..0751ab62f 100644
--- a/frontend/vue/components/Stations/Media.vue
+++ b/frontend/vue/components/Stations/Media.vue
@@ -163,6 +163,7 @@
                             />
                         </div>
                     </template>
+                    <!-- eslint-disable-next-line -->
                     <template #cell(media.length)="row">
                         {{ row.item.media.length_text }}
                     </template>
@@ -175,7 +176,10 @@
                         </template>
                     </template>
                     <template #cell(playlists)="row">
-                        <template v-for="(playlist, index) in row.item.playlists">
+                        <template
+                            v-for="(playlist, index) in row.item.playlists"
+                            :key="playlist.id"
+                        >
                             <a
                                 class="btn-search"
                                 href="#"
diff --git a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
index 6e866c8a6..bc2c660db 100644
--- a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
+++ b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
@@ -154,7 +154,7 @@ const setCueOut = () => {
 const setFadeOverlap = () => {
     let duration = $waveform.value?.getDuration();
     let currentTime = $waveform.value?.getCurrentTime();
-    let cue_out = form.value?.cue_out ?? duration;
+    let cue_out = props.form.cue_out ?? duration;
 
     props.form.fade_overlap = Math.round((cue_out - currentTime) * 10) / 10;
     updateRegions();
@@ -162,7 +162,7 @@ const setFadeOverlap = () => {
 
 const setFadeIn = () => {
     let currentTime = $waveform.value?.getCurrentTime();
-    let cue_in = form.value?.cue_in ?? 0;
+    let cue_in = props.form.cue_in ?? 0;
 
     props.form.fade_in = Math.round((currentTime - cue_in) * 10) / 10;
     updateRegions();
@@ -171,7 +171,7 @@ const setFadeIn = () => {
 const setFadeOut = () => {
     let currentTime = $waveform.value?.getCurrentTime();
     let duration = $waveform.value?.getDuration();
-    let cue_out = form.value?.cue_out ?? duration;
+    let cue_out = props.form.cue_out ?? duration;
 
     props.form.fade_out = Math.round((cue_out - currentTime) * 10) / 10;
     updateRegions();
diff --git a/frontend/vue/components/Stations/Playlists/EditModal.vue b/frontend/vue/components/Stations/Playlists/EditModal.vue
index 8deff5c23..77aae0150 100644
--- a/frontend/vue/components/Stations/Playlists/EditModal.vue
+++ b/frontend/vue/components/Stations/Playlists/EditModal.vue
@@ -14,8 +14,8 @@
         >
             <form-basic-info :form="v$.form" />
             <form-schedule
+                v-model:schedule-items="form.schedule_items"
                 :form="v$.form"
-                :schedule-items="form.schedule_items"
                 :station-time-zone="stationTimeZone"
             />
             <form-advanced
diff --git a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
index 85fa2f812..ce085c785 100644
--- a/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Playlists/Form/Schedule.vue
@@ -33,43 +33,44 @@
     </b-tab>
 </template>
 
-<script>
+<script setup>
 import Icon from '~/components/Common/Icon';
 import PlaylistsFormScheduleRow from "~/components/Stations/Playlists/Form/ScheduleRow.vue";
+import {useVModel} from "@vueuse/core";
 
-export default {
-    name: 'PlaylistEditSchedule',
-    components: {PlaylistsFormScheduleRow, Icon},
-    props: {
-        form: {
-            type: Object,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        scheduleItems: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        }
+const props = defineProps({
+    form: {
+        type: Object,
+        required: true
     },
-    methods: {
-        add() {
-            this.scheduleItems.push({
-                start_time: null,
-                end_time: null,
-                start_date: null,
-                end_date: null,
-                days: [],
-                loop_once: false
-            });
-        },
-        remove (index) {
-            this.scheduleItems.splice(index, 1);
+    stationTimeZone: {
+        type: String,
+        required: true
+    },
+    scheduleItems: {
+        type: Array,
+        default: () => {
+            return [];
         }
     }
+});
+
+const emit = defineEmits(['update:scheduleItems']);
+
+const scheduleItems = useVModel(props, 'scheduleItems', emit);
+
+const add = () => {
+    scheduleItems.value.push({
+        start_time: null,
+        end_time: null,
+        start_date: null,
+        end_date: null,
+        days: [],
+        loop_once: false
+    });
+};
+
+const remove = (index) => {
+    scheduleItems.value.splice(index, 1);
 };
 </script>
diff --git a/frontend/vue/components/Stations/Streamers/EditModal.vue b/frontend/vue/components/Stations/Streamers/EditModal.vue
index a349deeb0..754253d27 100644
--- a/frontend/vue/components/Stations/Streamers/EditModal.vue
+++ b/frontend/vue/components/Stations/Streamers/EditModal.vue
@@ -14,8 +14,8 @@
         >
             <form-basic-info :form="v$.form" />
             <form-schedule
+                v-model:schedule-items="form.schedule_items"
                 :form="v$.form"
-                :schedule-items="form.schedule_items"
                 :station-time-zone="stationTimeZone"
             />
             <form-artwork
diff --git a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
index 3d5a570aa..ca6e129cf 100644
--- a/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
+++ b/frontend/vue/components/Stations/Streamers/Form/Schedule.vue
@@ -31,55 +31,43 @@
     </b-tab>
 </template>
 
-<script>
+<script setup>
 import Icon from '~/components/Common/Icon';
 import StreamersFormScheduleRow from "~/components/Stations/Streamers/Form/ScheduleRow.vue";
+import {useVModel} from "@vueuse/core";
 
-export default {
-    name: 'StreamerFormSchedule',
-    components: {StreamersFormScheduleRow, Icon},
-    props: {
-        form: {
-            type: Object,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        scheduleItems: {
-            type: Array,
-            default: () => {
-                return [];
-            }
-        }
+const props = defineProps({
+    form: {
+        type: Object,
+        required: true
     },
-    data() {
-        return {
-            dayOptions: [
-                {value: 1, text: this.$gettext('Monday')},
-                {value: 2, text: this.$gettext('Tuesday')},
-                {value: 3, text: this.$gettext('Wednesday')},
-                {value: 4, text: this.$gettext('Thursday')},
-                {value: 5, text: this.$gettext('Friday')},
-                {value: 6, text: this.$gettext('Saturday')},
-                {value: 7, text: this.$gettext('Sunday')}
-            ]
-        };
+    stationTimeZone: {
+        type: String,
+        required: true
     },
-    methods: {
-        add () {
-            this.scheduleItems.push({
-                start_time: null,
-                end_time: null,
-                start_date: null,
-                end_date: null,
-                days: []
-            });
-        },
-        remove (index) {
-            this.scheduleItems.splice(index, 1);
+    scheduleItems: {
+        type: Array,
+        default: () => {
+            return [];
         }
     }
+});
+
+const emit = defineEmits(['update:scheduleItems']);
+
+const scheduleItems = useVModel(props, 'scheduleItems', emit);
+
+const add = () => {
+    scheduleItems.value.push({
+        start_time: null,
+        end_time: null,
+        start_date: null,
+        end_date: null,
+        days: []
+    });
+};
+
+const remove = (index) => {
+    scheduleItems.value.splice(index, 1);
 };
 </script>