From ef023675cec28e5a3ec4443c3abfdf82bf0eaa24 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Thu, 29 Dec 2022 13:31:23 -0600
Subject: [PATCH] Prefix template refs to avoid name conflicts.

---
 frontend/vue/components/Account.vue           | 30 ++++-----
 .../vue/components/Account/ApiKeyModal.vue    |  9 +--
 .../Account/ChangePasswordModal.vue           | 10 +--
 frontend/vue/components/Account/EditModal.vue |  9 ++-
 .../vue/components/Account/TwoFactorModal.vue |  8 +--
 frontend/vue/components/Admin/ApiKeys.vue     |  6 +-
 frontend/vue/components/Admin/AuditLog.vue    |  6 +-
 frontend/vue/components/Admin/Backups.vue     | 24 +++----
 .../Admin/Backups/ConfigureModal.vue          |  8 +--
 .../Admin/Backups/LastOutputModal.vue         |  6 +-
 .../Admin/Backups/RunBackupModal.vue          |  8 +--
 .../vue/components/Admin/CustomFields.vue     | 18 +++---
 .../Admin/Index/CpuStatsHelpModal.vue         |  9 ++-
 .../Admin/Index/MemoryStatsHelpModal.vue      |  8 +--
 frontend/vue/components/Admin/Logs.vue        |  6 +-
 .../components/Admin/Settings/ServicesTab.vue |  6 +-
 .../Admin/Settings/TestMessageModal.vue       |  6 +-
 .../components/Admin/Stations/CloneModal.vue  |  8 +--
 .../components/Admin/Stations/EditModal.vue   | 18 +++---
 .../components/Common/Charts/HourChart.vue    |  6 +-
 .../vue/components/Common/Charts/PieChart.vue |  6 +-
 .../Common/Charts/TimeSeriesChart.vue         |  6 +-
 frontend/vue/components/Common/FlowUpload.vue | 62 +++++++++----------
 .../components/Common/StreamingLogModal.vue   | 14 ++---
 .../vue/components/Form/BWrappedFormGroup.vue |  8 +--
 frontend/vue/components/InlinePlayer.vue      | 12 ++--
 .../Public/FullPlayer/RequestModal.vue        |  6 +-
 frontend/vue/components/Public/Player.vue     |  6 +-
 frontend/vue/components/Setup/Station.vue     |  6 +-
 frontend/vue/components/Stations/Help.vue     |  6 +-
 .../vue/components/Stations/HlsStreams.vue    | 14 ++---
 .../components/Stations/LiquidsoapConfig.vue  |  2 +-
 .../components/Stations/Media/EditModal.vue   |  8 +--
 .../Stations/Media/Form/WaveformEditor.vue    | 34 +++++-----
 frontend/vue/components/Stations/Mounts.vue   | 14 ++---
 .../Stations/Profile/EmbedModal.vue           |  6 +-
 .../Stations/Profile/PublicPagesPanel.vue     |  6 +-
 .../vue/components/Stations/ProfileEdit.vue   |  6 +-
 .../components/Stations/Queue/LogsModal.vue   |  8 +--
 frontend/vue/components/Stations/Remotes.vue  | 14 ++---
 .../Stations/Reports/Listeners/InnerMap.vue   |  6 +-
 .../Stations/Reports/Listeners/MapPoint.vue   |  6 +-
 42 files changed, 232 insertions(+), 233 deletions(-)

diff --git a/frontend/vue/components/Account.vue b/frontend/vue/components/Account.vue
index 308206d1e..7bf4da736 100644
--- a/frontend/vue/components/Account.vue
+++ b/frontend/vue/components/Account.vue
@@ -100,7 +100,7 @@
                         </b-button>
                     </b-card-body>
 
-                    <data-table ref="datatable" id="account_api_keys" :show-toolbar="false" :fields="apiKeyFields"
+                    <data-table ref="$dataTable" id="account_api_keys" :show-toolbar="false" :fields="apiKeyFields"
                                 :api-url="apiKeysApiUrl">
                         <template #cell(actions)="row">
                             <b-button-group size="sm">
@@ -114,16 +114,16 @@
             </b-col>
         </b-row>
 
-        <account-edit-modal ref="editmodal" :user-url="userUrl" :supported-locales="supportedLocales"
+        <account-edit-modal ref="$editModal" :user-url="userUrl" :supported-locales="supportedLocales"
                             @reload="reload"></account-edit-modal>
 
-        <account-change-password-modal ref="changepasswordmodal" :change-password-url="changePasswordUrl"
+        <account-change-password-modal ref="$changePasswordModal" :change-password-url="changePasswordUrl"
                                        @relist="relist"></account-change-password-modal>
 
-        <account-two-factor-modal ref="twofactormodal" :two-factor-url="twoFactorUrl"
+        <account-two-factor-modal ref="$twoFactorModal" :two-factor-url="twoFactorUrl"
                                   @relist="relist"></account-two-factor-modal>
 
-        <account-api-key-modal ref="apikeymodal" :create-url="apiKeysApiUrl" @relist="relist"></account-api-key-modal>
+        <account-api-key-modal ref="$apiKeyModal" :create-url="apiKeysApiUrl" @relist="relist"></account-api-key-modal>
     </div>
 </template>
 
@@ -185,7 +185,7 @@ const apiKeyFields = [
     }
 ];
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
 
@@ -217,7 +217,7 @@ const relist = () => {
         securityLoading.value = false;
     });
 
-    datatable.value?.relist();
+    $dataTable.value?.relist();
 };
 
 onMounted(relist);
@@ -226,22 +226,22 @@ const reload = () => {
     location.reload();
 };
 
-const editmodal = ref(); // EditModal
+const $editModal = ref(); // EditModal
 
 const doEditProfile = () => {
-    editmodal.value?.open();
+    $editModal.value?.open();
 };
 
-const changepasswordmodal = ref(); // ChangePasswordModal
+const $changePasswordModal = ref(); // ChangePasswordModal
 
 const doChangePassword = () => {
-    changepasswordmodal.value?.open();
+    $changePasswordModal.value?.open();
 };
 
-const twofactormodal = ref(); // TwoFactorModal
+const $twoFactorModal = ref(); // TwoFactorModal
 
 const enableTwoFactor = () => {
-    twofactormodal.value?.open();
+    $twoFactorModal.value?.open();
 };
 
 const {confirmDelete} = useSweetAlert();
@@ -261,10 +261,10 @@ const disableTwoFactor = () => {
     });
 };
 
-const apikeymodal = ref(); // ApiKeyModal
+const $apiKeyModal = ref(); // ApiKeyModal
 
 const createApiKey = () => {
-    apikeymodal.value?.create();
+    $apiKeyModal.value?.create();
 };
 
 const deleteApiKey = (url) => {
diff --git a/frontend/vue/components/Account/ApiKeyModal.vue b/frontend/vue/components/Account/ApiKeyModal.vue
index 1652626a2..2d83ae18b 100644
--- a/frontend/vue/components/Account/ApiKeyModal.vue
+++ b/frontend/vue/components/Account/ApiKeyModal.vue
@@ -1,5 +1,6 @@
 <template>
-    <b-modal size="md" centered id="api_keys_modal" ref="modal" :title="$gettext('Add API Key')" @hidden="clearContents"
+    <b-modal size="md" centered id="api_keys_modal" ref="$modal" :title="$gettext('Add API Key')"
+             @hidden="clearContents"
              no-enforce-focus>
         <template #default="slotProps">
             <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
@@ -70,12 +71,12 @@ const clearContents = () => {
     newKey.value = null;
 };
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const create = () => {
     clearContents();
 
-    modal.value?.show();
+    $modal.value?.show();
 };
 
 const {wrapWithLoading} = useNotify();
@@ -104,7 +105,7 @@ const doSubmit = () => {
 };
 
 const close = () => {
-    modal.value?.hide();
+    $modal.value?.hide();
 };
 
 defineExpose({
diff --git a/frontend/vue/components/Account/ChangePasswordModal.vue b/frontend/vue/components/Account/ChangePasswordModal.vue
index 810757bab..153525088 100644
--- a/frontend/vue/components/Account/ChangePasswordModal.vue
+++ b/frontend/vue/components/Account/ChangePasswordModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
+    <modal-form ref="$modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
                 @submit="onSubmit" @hidden="clearContents">
         <b-form-fieldset>
             <b-wrapped-form-group id="form_current_password" :field="v$.current_password"
@@ -75,15 +75,15 @@ const clearContents = () => {
     resetForm();
 };
 
-const modal = ref(); // ModalForm
+const $modal = ref(); // ModalForm
 
 const open = () => {
     clearContents();
-    modal.value.show();
+    $modal.value.show();
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 const {wrapWithLoading} = useNotify();
@@ -98,7 +98,7 @@ const onSubmit = () => {
     wrapWithLoading(
         axios.put(props.changePasswordUrl, form.value)
     ).finally(() => {
-        modal.value.hide();
+        $modal.value.hide();
         emit('relist');
     });
 };
diff --git a/frontend/vue/components/Account/EditModal.vue b/frontend/vue/components/Account/EditModal.vue
index 54ae9e105..ef0120204 100644
--- a/frontend/vue/components/Account/EditModal.vue
+++ b/frontend/vue/components/Account/EditModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="$gettext('Edit Profile')" :error="error"
+    <modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Profile')" :error="error"
                 :disable-save-button="v$.$invalid"
                 @submit="doSubmit" @hidden="clearContents">
 
@@ -11,7 +11,6 @@
 <script setup>
 import mergeExisting from "~/functions/mergeExisting";
 import {email, required} from '@vuelidate/validators';
-import useVuelidate from "@vuelidate/core";
 import AccountEditForm from "./EditForm.vue";
 import ModalForm from "~/components/Common/ModalForm.vue";
 import {ref} from "vue";
@@ -52,10 +51,10 @@ const clearContents = () => {
     error.value = null;
 };
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 };
 
 const {wrapWithLoading, notifySuccess} = useNotify();
@@ -64,7 +63,7 @@ const {axios} = useAxios();
 const open = () => {
     clearContents();
 
-    modal.value?.show();
+    $modal.value?.show();
 
     wrapWithLoading(
         axios.get(props.userUrl)
diff --git a/frontend/vue/components/Account/TwoFactorModal.vue b/frontend/vue/components/Account/TwoFactorModal.vue
index d349a822d..dfae834fc 100644
--- a/frontend/vue/components/Account/TwoFactorModal.vue
+++ b/frontend/vue/components/Account/TwoFactorModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="$gettext('Enable Two-Factor Authentication')"
+    <modal-form ref="$modal" :loading="loading" :title="$gettext('Enable Two-Factor Authentication')"
                 :error="error" :disable-save-button="v$.$invalid"
                 @submit="doSubmit" @hidden="clearContents" no-enforce-focus>
 
@@ -99,10 +99,10 @@ const clearContents = () => {
     error.value = null;
 };
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const close = () => {
-    modal.value?.hide();
+    $modal.value?.hide();
 };
 
 const {wrapWithLoading, notifySuccess} = useNotify();
@@ -113,7 +113,7 @@ const open = () => {
 
     loading.value = true;
 
-    modal.value?.show();
+    $modal.value?.show();
 
     wrapWithLoading(
         axios.put(props.twoFactorUrl)
diff --git a/frontend/vue/components/Admin/ApiKeys.vue b/frontend/vue/components/Admin/ApiKeys.vue
index 3cbaf14e7..eb50ef22c 100644
--- a/frontend/vue/components/Admin/ApiKeys.vue
+++ b/frontend/vue/components/Admin/ApiKeys.vue
@@ -4,7 +4,7 @@
             <h2 class="card-title">{{ $gettext('API Keys') }}</h2>
         </b-card-header>
 
-        <data-table ref="datatable" id="api_keys" :fields="fields" :api-url="apiUrl">
+        <data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="apiUrl">
             <template #cell(owner)="row">
                 {{ row.item.user.email }}
             </template>
@@ -53,10 +53,10 @@ const fields = ref([
     }
 ]);
 
-const datatable = ref();
+const $dataTable = ref();
 
 const relist = () => {
-    datatable.value.relist();
+    $dataTable.value.relist();
 };
 
 const {confirmDelete} = useSweetAlert();
diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index 4f5cf8374..fcfda14c4 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -10,7 +10,7 @@
                 </div>
             </div>
         </div>
-        <data-table ref="datatable" responsive paginated
+        <data-table ref="$dataTable" responsive paginated
                     :fields="fields" :apiUrl="apiUrl">
             <template #cell(date_time)="row">
                 {{ formatTimestamp(row.item.timestamp) }}
@@ -123,10 +123,10 @@ const apiUrl = computed(() => {
     return apiUrl.toString();
 });
 
-const datatable = ref(); // DataTable Template Ref
+const $dataTable = ref(); // DataTable Template Ref
 
 const relist = () => {
-    datatable.value.relist();
+    $dataTable.value.relist();
 };
 
 const formatTimestamp = (unix_timestamp) => {
diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue
index 4076a8321..c9181ccf5 100644
--- a/frontend/vue/components/Admin/Backups.vue
+++ b/frontend/vue/components/Admin/Backups.vue
@@ -74,7 +74,7 @@
                 </b-button>
             </b-card-body>
 
-            <data-table ref="datatable" id="api_keys" :fields="fields" :api-url="listUrl">
+            <data-table ref="$dataTable" id="api_keys" :fields="fields" :api-url="listUrl">
                 <template #cell(timestamp)="row">
                     {{ toLocaleTime(row.item.timestamp) }}
                 </template>
@@ -94,15 +94,15 @@
             </data-table>
         </section>
 
-        <admin-backups-configure-modal ref="configureModal" :settings-url="settingsUrl"
+        <admin-backups-configure-modal ref="$configureModal" :settings-url="settingsUrl"
                                        :storage-locations="storageLocations"
                                        @relist="relist"></admin-backups-configure-modal>
 
-        <admin-backups-run-backup-modal ref="runBackupModal" :run-backup-url="runBackupUrl"
+        <admin-backups-run-backup-modal ref="$runBackupModal" :run-backup-url="runBackupUrl"
                                         :storage-locations="storageLocations"
                                         @relist="relist"></admin-backups-run-backup-modal>
 
-        <admin-backups-last-output-modal ref="lastOutputModal"
+        <admin-backups-last-output-modal ref="$lastOutputModal"
                                          :last-output="settings.backupLastOutput"></admin-backups-last-output-modal>
     </div>
 </template>
@@ -168,7 +168,7 @@ const fields = [
     }
 ];
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
@@ -186,7 +186,7 @@ const relist = () => {
         settingsLoading.value = false;
     });
 
-    datatable.value.relist();
+    $dataTable.value.relist();
 };
 
 onMounted(relist);
@@ -203,19 +203,19 @@ const toLocaleTime = (timestamp) => {
     );
 };
 
-const lastOutputModal = ref(); // AdminBackupsLastOutputModal
+const $lastOutputModal = ref(); // AdminBackupsLastOutputModal
 const showLastOutput = () => {
-    lastOutputModal.value.show();
+    $lastOutputModal.value.show();
 };
 
-const configureModal = ref(); // AdminBackupsConfigureModal
+const $configureModal = ref(); // AdminBackupsConfigureModal
 const doConfigure = () => {
-    configureModal.value.open();
+    $configureModal.value.open();
 };
 
-const runBackupModal = ref(); // AdminBackupsRunBackupModal
+const $runBackupModal = ref(); // AdminBackupsRunBackupModal
 const doRunBackup = () => {
-    runBackupModal.value.open();
+    $runBackupModal.value.open();
 };
 
 const {confirmDelete} = useSweetAlert();
diff --git a/frontend/vue/components/Admin/Backups/ConfigureModal.vue b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
index a382182ba..8bb15e984 100644
--- a/frontend/vue/components/Admin/Backups/ConfigureModal.vue
+++ b/frontend/vue/components/Admin/Backups/ConfigureModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
+    <modal-form ref="$modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
                 :disable-save-button="v$.$invalid" @submit="submit" @hidden="resetForm">
         <b-form-fieldset>
             <div class="form-row mb-3">
@@ -101,7 +101,7 @@ const emit = defineEmits(['relist']);
 const loading = ref(true);
 const error = ref(null);
 
-const modal = ref(); // ModalForm
+const $modal = ref(); // ModalForm
 
 const {form, resetForm, v$} = useVuelidateOnForm(
     {
@@ -147,14 +147,14 @@ const {axios} = useAxios();
 
 const close = () => {
     emit('relist');
-    modal.value.hide();
+    $modal.value.hide();
 };
 
 const open = () => {
     resetForm();
     loading.value = true;
 
-    modal.value.show();
+    $modal.value.show();
 
     axios.get(props.settingsUrl).then((resp) => {
         form.value = mergeExisting(form.value, resp.data);
diff --git a/frontend/vue/components/Admin/Backups/LastOutputModal.vue b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
index ca518b66c..891c8b338 100644
--- a/frontend/vue/components/Admin/Backups/LastOutputModal.vue
+++ b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="md" id="log_view_modal" ref="modal" :title="$gettext('Log Viewer')">
+    <b-modal size="md" id="log_view_modal" ref="$modal" :title="$gettext('Log Viewer')">
         <pre id="modal-log-view-contents" class="form-control log-viewer"
              style="height: 300px; overflow-y: auto;">{{ lastOutput }}</pre>
     </b-modal>
@@ -12,9 +12,9 @@ const props = defineProps({
     lastOutput: String,
 });
 
-const modal = ref(); // Template ref
+const $modal = ref(); // Template ref
 const show = () => {
-    modal.value.show();
+    $modal.value.show();
 };
 
 defineExpose({
diff --git a/frontend/vue/components/Admin/Backups/RunBackupModal.vue b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
index 386855bcf..e0060c295 100644
--- a/frontend/vue/components/Admin/Backups/RunBackupModal.vue
+++ b/frontend/vue/components/Admin/Backups/RunBackupModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="md" centered id="run_backup_modal" ref="modal" :title="$gettext('Run Manual Backup')"
+    <b-modal size="md" centered id="run_backup_modal" ref="$modal" :title="$gettext('Run Manual Backup')"
              @hidden="clearContents">
         <template #default="slotProps">
             <b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
@@ -105,7 +105,7 @@ const storageLocationOptions = computed(() => {
 
 const logUrl = ref(null);
 const error = ref(null);
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const {form, resetForm, v$} = useVuelidateOnForm(
     {
@@ -121,11 +121,11 @@ const {form, resetForm, v$} = useVuelidateOnForm(
 );
 
 const open = () => {
-    modal.value.show();
+    $modal.value.show();
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
     emit('relist');
 }
 
diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue
index 0cb2e54a9..43d64644f 100644
--- a/frontend/vue/components/Admin/CustomFields.vue
+++ b/frontend/vue/components/Admin/CustomFields.vue
@@ -19,7 +19,7 @@
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
+        <data-table ref="$dataTable" id="custom_fields" :fields="fields" :show-toolbar="false" :api-url="listUrl">
             <template #cell(name)="row">
                 {{ row.item.name }} <code>{{ row.item.short_name }}</code>
             </template>
@@ -39,7 +39,7 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editmodal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
+    <edit-modal ref="$editModal" :create-url="listUrl" :auto-assign-types="autoAssignTypes"
                 @relist="relist"></edit-modal>
 </template>
 
@@ -48,7 +48,7 @@ import DataTable from '~/components/Common/DataTable.vue';
 import EditModal from './CustomFields/EditModal.vue';
 import Icon from '~/components/Common/Icon.vue';
 import InfoCard from '~/components/Common/InfoCard.vue';
-import _ from 'lodash';
+import _, {get} from 'lodash';
 import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import {useSweetAlert} from "~/vendor/sweetalert";
@@ -69,23 +69,23 @@ const fields = [
 ];
 
 const getAutoAssignName = (autoAssign) => {
-    return _.get(props.autoAssignTypes, autoAssign, $gettext('None'));
+    return get(props.autoAssignTypes, autoAssign, $gettext('None'));
 };
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 
 const relist = () => {
-    datatable.value.refresh();
+    $dataTable.value.refresh();
 };
 
-const editmodal = ref(); // EditModal
+const $editModal = ref(); // EditModal
 
 const doCreate = () => {
-    editmodal.value.create();
+    $editModal.value.create();
 }
 
 const doEdit = (url) => {
-    editmodal.value.edit(url);
+    $editModal.value.edit(url);
 }
 
 const {confirmDelete} = useSweetAlert();
diff --git a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
index 5aed35296..0b08b5f18 100644
--- a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('CPU Stats Help')">
+    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('CPU Stats Help')">
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
@@ -68,15 +68,14 @@
 
 <script setup>
 import {ref} from "vue";
-import {BModal} from "bootstrap-vue";
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const create = () => {
-    modal.value.show();
+    $modal.value.show();
 }
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 defineExpose({
diff --git a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
index 402333af3..af8925714 100644
--- a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('Memory Stats Help')">
+    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="$modal" :title="$gettext('Memory Stats Help')">
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
@@ -42,13 +42,13 @@
 import {ref} from "vue";
 import {BModal} from "bootstrap-vue";
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const create = () => {
-    modal.value.show();
+    $modal.value.show();
 }
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 defineExpose({
diff --git a/frontend/vue/components/Admin/Logs.vue b/frontend/vue/components/Admin/Logs.vue
index 96eb8882c..7a6fa4c24 100644
--- a/frontend/vue/components/Admin/Logs.vue
+++ b/frontend/vue/components/Admin/Logs.vue
@@ -23,7 +23,7 @@
         </b-tabs>
     </div>
 
-    <streaming-log-modal ref="modal"></streaming-log-modal>
+    <streaming-log-modal ref="$modal"></streaming-log-modal>
 </template>
 
 <script setup>
@@ -36,9 +36,9 @@ const props = defineProps({
     stationLogs: Array
 });
 
-const modal = ref(); // StreamingLogModal
+const $modal = ref(); // StreamingLogModal
 
 const viewLog = (url) => {
-    modal.value.show(url);
+    $modal.value.show(url);
 };
 </script>
diff --git a/frontend/vue/components/Admin/Settings/ServicesTab.vue b/frontend/vue/components/Admin/Settings/ServicesTab.vue
index b7a3902e3..02ae3476c 100644
--- a/frontend/vue/components/Admin/Settings/ServicesTab.vue
+++ b/frontend/vue/components/Admin/Settings/ServicesTab.vue
@@ -220,7 +220,7 @@
         </div>
     </b-form-fieldset>
 
-    <streaming-log-modal ref="acmemodal"></streaming-log-modal>
+    <streaming-log-modal ref="$acmeModal"></streaming-log-modal>
 
     <admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
 </template>
@@ -270,7 +270,7 @@ const avatarServiceOptions = computed(() => {
     ]
 });
 
-const acmemodal = ref(); // StreamingLogModal
+const $acmeModal = ref(); // StreamingLogModal
 const {wrapWithLoading} = useNotify();
 const {axios} = useAxios();
 
@@ -278,7 +278,7 @@ const generateAcmeCert = () => {
     wrapWithLoading(
         axios.put(props.acmeUrl)
     ).then((resp) => {
-        acmemodal.value.show(resp.data.links.log);
+        $acmeModal.value.show(resp.data.links.log);
     });
 }
 </script>
diff --git a/frontend/vue/components/Admin/Settings/TestMessageModal.vue b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
index 45c7ee251..cd7ab90f7 100644
--- a/frontend/vue/components/Admin/Settings/TestMessageModal.vue
+++ b/frontend/vue/components/Admin/Settings/TestMessageModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal id="send_test_message" centered ref="modal" :title="$gettext('Send Test Message')">
+    <b-modal id="send_test_message" centered ref="$modal" :title="$gettext('Send Test Message')">
         <b-form @submit.prevent="doSendTest">
             <b-wrapped-form-group id="email_address" :field="v$.emailAddress" autofocus>
                 <template #label>
@@ -44,11 +44,11 @@ const {form, resetForm, v$} = useVuelidateOnForm(
     }
 );
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const close = () => {
     v$.value.reset();
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 const {wrapWithLoading, notifySuccess} = useNotify();
diff --git a/frontend/vue/components/Admin/Stations/CloneModal.vue b/frontend/vue/components/Admin/Stations/CloneModal.vue
index 67f218f43..2c892acf8 100644
--- a/frontend/vue/components/Admin/Stations/CloneModal.vue
+++ b/frontend/vue/components/Admin/Stations/CloneModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="$gettext('Clone Station')" :error="error"
+    <modal-form ref="$modal" :loading="loading" :title="$gettext('Clone Station')" :error="error"
                 :disable-save-button="v$.$invalid"
                 @submit="doSubmit" @hidden="clearContents">
 
@@ -37,7 +37,7 @@ const {form, resetForm, v$} = useVuelidateOnForm(
     }
 );
 
-const modal = ref(); // ModalForm
+const $modal = ref(); // ModalForm
 const {$gettext} = useTranslate();
 
 const create = (stationName, stationCloneUrl) => {
@@ -51,7 +51,7 @@ const create = (stationName, stationCloneUrl) => {
     error.value = null;
     cloneUrl.value = stationCloneUrl;
 
-    modal.value.show();
+    $modal.value.show();
 };
 
 const clearContents = () => {
@@ -60,7 +60,7 @@ const clearContents = () => {
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 };
 
 const {wrapWithLoading, notifySuccess} = useNotify();
diff --git a/frontend/vue/components/Admin/Stations/EditModal.vue b/frontend/vue/components/Admin/Stations/EditModal.vue
index 795717d61..2dcda767d 100644
--- a/frontend/vue/components/Admin/Stations/EditModal.vue
+++ b/frontend/vue/components/Admin/Stations/EditModal.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-modal size="lg" id="station_edit_modal" ref="modal" :title="langTitle" :busy="loading"
+    <b-modal size="lg" id="station_edit_modal" ref="$modal" :title="langTitle" :busy="loading"
              @shown="resetForm" @hidden="clearContents">
-        <admin-stations-form v-bind="$props" ref="form" is-modal :create-url="createUrl" :edit-url="editUrl"
+        <admin-stations-form v-bind="$props" ref="$form" is-modal :create-url="createUrl" :edit-url="editUrl"
                              :is-edit-mode="isEditMode" @error="close" @submitted="onSubmit"
                              @validUpdate="onValidUpdate" @loadingUpdate="onLoadingUpdate">
             <template #submitButton>
@@ -51,7 +51,7 @@ const langTitle = computed(() => {
         : $gettext('Add Station');
 });
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const onValidUpdate = (newValue) => {
     disableSaveButton.value = !newValue;
@@ -63,22 +63,22 @@ const onLoadingUpdate = (newValue) => {
 
 const create = () => {
     editUrl.value = null;
-    modal.value.show();
+    $modal.value.show();
 };
 
 const edit = (recordUrl) => {
     editUrl.value = recordUrl;
-    modal.value.show();
+    $modal.value.show();
 };
 
-const form = ref(); // AdminStationsForm
+const $form = ref(); // AdminStationsForm
 
 const resetForm = () => {
-    form.value.reset();
+    $form.value.reset();
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 };
 
 const onSubmit = () => {
@@ -87,7 +87,7 @@ const onSubmit = () => {
 };
 
 const doSubmit = () => {
-    form.value.submit();
+    $form.value.submit();
 };
 
 const clearContents = () => {
diff --git a/frontend/vue/components/Common/Charts/HourChart.vue b/frontend/vue/components/Common/Charts/HourChart.vue
index d145d35e3..861d5f127 100644
--- a/frontend/vue/components/Common/Charts/HourChart.vue
+++ b/frontend/vue/components/Common/Charts/HourChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <canvas ref="canvas">
+    <canvas ref="$canvas">
         <slot></slot>
     </canvas>
 </template>
@@ -17,7 +17,7 @@ const props = defineProps({
 });
 
 let $chart = null;
-const canvas = ref(); // Template Ref
+const $canvas = ref(); // Template Ref
 const {$gettext} = useTranslate();
 
 onMounted(() => {
@@ -59,7 +59,7 @@ onMounted(() => {
     }
 
     let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
-    $chart = new Chart(canvas.value.getContext('2d'), chartOptions);
+    $chart = new Chart($canvas.value.getContext('2d'), chartOptions);
 });
 
 onUnmounted(() => {
diff --git a/frontend/vue/components/Common/Charts/PieChart.vue b/frontend/vue/components/Common/Charts/PieChart.vue
index 664f04c0b..f2bf64228 100644
--- a/frontend/vue/components/Common/Charts/PieChart.vue
+++ b/frontend/vue/components/Common/Charts/PieChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <canvas ref="canvas">
+    <canvas ref="$canvas">
         <slot></slot>
     </canvas>
 </template>
@@ -19,7 +19,7 @@ const props = defineProps({
     }
 });
 
-const canvas = ref(); // Template ref
+const $canvas = ref(); // Template ref
 let $chart = null;
 
 onMounted(() => {
@@ -44,7 +44,7 @@ onMounted(() => {
     }
 
     let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
-    $chart = new Chart(canvas.value.getContext('2d'), chartOptions);
+    $chart = new Chart($canvas.value.getContext('2d'), chartOptions);
 });
 
 onUnmounted(() => {
diff --git a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
index 628f03072..d25e359c4 100644
--- a/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
+++ b/frontend/vue/components/Common/Charts/TimeSeriesChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <canvas ref="canvas">
+    <canvas ref="$canvas">
         <slot></slot>
     </canvas>
 </template>
@@ -18,7 +18,7 @@ const props = defineProps({
     data: Array
 });
 
-const canvas = ref(); // Template ref
+const $canvas = ref(); // Template ref
 let $chart = null;
 
 const {$gettext} = useTranslate();
@@ -92,7 +92,7 @@ onMounted(() => {
     }
 
     let chartOptions = _.defaultsDeep({}, props.options, defaultOptions);
-    $chart = new Chart(get(canvas).getContext('2d'), chartOptions);
+    $chart = new Chart(get($canvas).getContext('2d'), chartOptions);
 });
 
 onUnmounted(() => {
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index 6f4f6e4e5..213ab61e1 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -17,9 +17,9 @@
                 </div>
             </template>
         </div>
-        <div class="file-drop-target" ref="file_drop_target">
+        <div class="file-drop-target" ref="$fileDropTarget">
             {{ $gettext('Drag file(s) here to upload or') }}
-            <button ref="file_browse_target" class="file-upload btn btn-primary text-center ml-1" type="button">
+            <button ref="$fileBrowseTarget" class="file-upload btn btn-primary text-center ml-1" type="button">
                 <icon icon="cloud_upload"></icon>
                 {{ $gettext('Select File') }}
             </button>
@@ -121,47 +121,47 @@ const files = reactive({
         return this.value[file.uniqueIdentifier] ?? {};
     },
     hideAll() {
-      forEach(this.value, (file) => {
-        file.isVisible = false;
-      });
+        forEach(this.value, (file) => {
+            file.isVisible = false;
+        });
     },
-  reset() {
-    this.value = {};
-  }
+    reset() {
+        this.value = {};
+    }
 });
 
-const file_browse_target = ref(); // Template Ref
-const file_drop_target = ref(); // Template Ref
+const $fileBrowseTarget = ref(); // Template Ref
+const $fileDropTarget = ref(); // Template Ref
 
 const {apiCsrf} = useAzuraCast();
 
 const {$gettext} = useTranslate();
 
 onMounted(() => {
-  let defaultConfig = {
-    target: () => {
-      return props.targetUrl
-    },
-    singleFile: !props.allowMultiple,
-    headers: {
-      'Accept': 'application/json',
-      'X-API-CSRF': apiCsrf
-    },
-    withCredentials: true,
-    allowDuplicateUploads: true,
-    fileParameterName: 'file_data',
-    uploadMethod: 'POST',
-    testMethod: 'GET',
-    method: 'multipart',
-    maxChunkRetries: 3,
-    testChunks: false
-  };
-  let config = defaultsDeep({}, props.flowConfiguration, defaultConfig);
+    let defaultConfig = {
+        target: () => {
+            return props.targetUrl
+        },
+        singleFile: !props.allowMultiple,
+        headers: {
+            'Accept': 'application/json',
+            'X-API-CSRF': apiCsrf
+        },
+        withCredentials: true,
+        allowDuplicateUploads: true,
+        fileParameterName: 'file_data',
+        uploadMethod: 'POST',
+        testMethod: 'GET',
+        method: 'multipart',
+        maxChunkRetries: 3,
+        testChunks: false
+    };
+    let config = defaultsDeep({}, props.flowConfiguration, defaultConfig);
 
     flow = new Flow(config);
 
-    flow.assignBrowse(file_browse_target.value);
-    flow.assignDrop(file_drop_target.value);
+    flow.assignBrowse($fileBrowseTarget.value);
+    flow.assignDrop($fileDropTarget.value);
 
     flow.on('fileAdded', (file) => {
         files.push(file);
diff --git a/frontend/vue/components/Common/StreamingLogModal.vue b/frontend/vue/components/Common/StreamingLogModal.vue
index 6c2d494e8..d6bedabec 100644
--- a/frontend/vue/components/Common/StreamingLogModal.vue
+++ b/frontend/vue/components/Common/StreamingLogModal.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-modal id="logs_modal" size="lg" ref="modal" @hidden="clearContents"
+    <b-modal id="logs_modal" size="lg" ref="$modal" @hidden="clearContents"
              :title="$gettext('Log Viewer')" no-enforce-focus>
-        <streaming-log-view ref="logView" :log-url="logUrl"></streaming-log-view>
+        <streaming-log-view ref="$logView" :log-url="logUrl"></streaming-log-view>
 
         <template #modal-footer>
             <b-button variant="default" type="button" @click="close">
@@ -20,22 +20,22 @@ import {ref} from "vue";
 import {useClipboard} from "@vueuse/core";
 
 const logUrl = ref('');
-const modal = ref(); // Template ref
-const logView = ref(); // Template ref
+const $modal = ref(); // Template ref
+const $logView = ref(); // Template ref
 
 const show = (newLogUrl) => {
     logUrl.value = newLogUrl;
-    modal.value.show();
+    $modal.value.show();
 };
 
 const clipboard = useClipboard();
 
 const doCopy = () => {
-    clipboard.copy(logView.value.getContents());
+    clipboard.copy($logView.value.getContents());
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 const clearContents = () => {
diff --git a/frontend/vue/components/Form/BWrappedFormGroup.vue b/frontend/vue/components/Form/BWrappedFormGroup.vue
index 9c4b31de4..e4e7a155d 100644
--- a/frontend/vue/components/Form/BWrappedFormGroup.vue
+++ b/frontend/vue/components/Form/BWrappedFormGroup.vue
@@ -2,10 +2,10 @@
     <b-form-group v-bind="$attrs" :label-for="id" :state="fieldState">
         <template #default>
             <slot name="default" v-bind="{ id, field, state: fieldState }">
-                <b-form-textarea v-bind="inputAttrs" v-if="inputType === 'textarea'" ref="input" :id="id" :name="name"
+                <b-form-textarea v-bind="inputAttrs" v-if="inputType === 'textarea'" ref="$input" :id="id" :name="name"
                                  v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
                                  :autofocus="autofocus" :state="fieldState"></b-form-textarea>
-                <b-form-input v-bind="inputAttrs" v-else ref="input" :type="inputType" :id="id" :name="name"
+                <b-form-input v-bind="inputAttrs" v-else ref="$input" :type="inputType" :id="id" :name="name"
                               v-model="modelValue" :required="isRequired" :number="isNumeric" :trim="inputTrim"
                               :autofocus="autofocus" :state="fieldState"></b-form-input>
             </slot>
@@ -112,10 +112,10 @@ const isNumeric = computed(() => {
     return props.inputNumber || props.inputType === "number";
 });
 
-const input = ref(); // Input
+const $input = ref(); // Input
 
 const focus = () => {
-    input.value?.focus();
+    $input.value?.focus();
 };
 
 defineExpose({
diff --git a/frontend/vue/components/InlinePlayer.vue b/frontend/vue/components/InlinePlayer.vue
index 35ea85cc9..b11b18234 100644
--- a/frontend/vue/components/InlinePlayer.vue
+++ b/frontend/vue/components/InlinePlayer.vue
@@ -1,5 +1,5 @@
 <template>
-    <audio-player ref="player" :volume="volume" :is-muted="isMuted"></audio-player>
+    <audio-player ref="$player" :volume="volume" :is-muted="isMuted"></audio-player>
 
     <div class="ml-3 player-inline" v-if="isPlaying">
         <div class="inline-seek d-inline-flex align-items-center ml-1" v-if="!current.isStream && duration !== 0">
@@ -79,10 +79,10 @@ const current = toRef(store, 'current');
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
 const isMounted = useMounted();
-const player = ref(); // AudioPlayer
+const $player = ref(); // AudioPlayer
 
 const duration = computed(() => {
-    return player.value?.getDuration();
+    return $player.value?.getDuration();
 });
 
 const durationText = computed(() => {
@@ -90,7 +90,7 @@ const durationText = computed(() => {
 });
 
 const currentTime = computed(() => {
-    return player.value?.getCurrentTime();
+    return $player.value?.getCurrentTime();
 });
 
 const currentTimeText = computed(() => {
@@ -99,10 +99,10 @@ const currentTimeText = computed(() => {
 
 const progress = computed({
     get: () => {
-        return player.value?.getProgress();
+        return $player.value?.getProgress();
     },
     set: (prog) => {
-        player.value?.setProgress(prog);
+        $player.value?.setProgress(prog);
     }
 });
 
diff --git a/frontend/vue/components/Public/FullPlayer/RequestModal.vue b/frontend/vue/components/Public/FullPlayer/RequestModal.vue
index a5baecd5d..2c25bf451 100644
--- a/frontend/vue/components/Public/FullPlayer/RequestModal.vue
+++ b/frontend/vue/components/Public/FullPlayer/RequestModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="lg" id="request_modal" ref="modal" :title="$gettext('Request a Song')" hide-footer>
+    <b-modal size="lg" id="request_modal" ref="$modal" :title="$gettext('Request a Song')" hide-footer>
         <song-request :show-album-art="showAlbumArt" :request-list-uri="requestListUri" :custom-fields="customFields"
                       @submitted="doClose"></song-request>
     </b-modal>
@@ -25,9 +25,9 @@ const props = defineProps({
     }
 });
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const doClose = () => {
-    modal.value?.hide();
+    $modal.value?.hide();
 };
 </script>
diff --git a/frontend/vue/components/Public/Player.vue b/frontend/vue/components/Public/Player.vue
index 96bad212e..55b5b1c93 100644
--- a/frontend/vue/components/Public/Player.vue
+++ b/frontend/vue/components/Public/Player.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="radio-player-widget">
-        <audio-player ref="player" :title="np.now_playing.song.text" :volume="volume"
+        <audio-player ref="$player" :title="np.now_playing.song.text" :volume="volume"
                       :is-muted="isMuted"></audio-player>
 
         <div class="now-playing-details">
@@ -304,7 +304,7 @@ const currentTimeTotalDisplay = computed(() => {
 });
 
 const isMounted = useMounted();
-const player = ref(); // Template ref
+const $player = ref(); // Template ref
 
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
@@ -319,7 +319,7 @@ const fullVolume = () => {
 
 const switchStream = (new_stream) => {
     currentStream.value = new_stream;
-    player.value.toggle(new_stream.url, true, new_stream.hls);
+    $player.value.toggle(new_stream.url, true, new_stream.hls);
 };
 
 onMounted(() => {
diff --git a/frontend/vue/components/Setup/Station.vue b/frontend/vue/components/Setup/Station.vue
index bb1cfcc84..cea6b0dac 100644
--- a/frontend/vue/components/Setup/Station.vue
+++ b/frontend/vue/components/Setup/Station.vue
@@ -14,7 +14,7 @@
             }}
         </info-card>
 
-        <admin-stations-form v-bind="$props" ref="adminForm" :is-edit-mode="false" :create-url="createUrl"
+        <admin-stations-form v-bind="$props" ref="$adminForm" :is-edit-mode="false" :create-url="createUrl"
                              @submitted="onSubmitted">
             <template #submitButtonText>
                 {{ $gettext('Create and Continue') }}
@@ -39,10 +39,10 @@ const props = defineProps({
     }
 });
 
-const adminForm = ref(); // Template Ref
+const $adminForm = ref(); // Template Ref
 
 onMounted(() => {
-    adminForm.value.reset();
+    $adminForm.value.reset();
 });
 
 const onSubmitted = () => {
diff --git a/frontend/vue/components/Stations/Help.vue b/frontend/vue/components/Stations/Help.vue
index 995868f50..b627d003e 100644
--- a/frontend/vue/components/Stations/Help.vue
+++ b/frontend/vue/components/Stations/Help.vue
@@ -11,7 +11,7 @@
                 <log-list :url="logsUrl" @view="viewLog"></log-list>
             </div>
 
-            <streaming-log-modal ref="modal"></streaming-log-modal>
+            <streaming-log-modal ref="$modal"></streaming-log-modal>
         </div>
         <div class="col-md-4">
             <div class="card">
@@ -57,9 +57,9 @@ const props = defineProps({
     logsUrl: String,
 });
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const viewLog = (url) => {
-    modal.value?.show(url);
+    $modal.value?.show(url);
 };
 </script>
diff --git a/frontend/vue/components/Stations/HlsStreams.vue b/frontend/vue/components/Stations/HlsStreams.vue
index ccbc92372..d7f2e5843 100644
--- a/frontend/vue/components/Stations/HlsStreams.vue
+++ b/frontend/vue/components/Stations/HlsStreams.vue
@@ -19,7 +19,7 @@
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_hls_streams" :fields="fields" paginated
+        <data-table ref="$dataTable" id="station_hls_streams" :fields="fields" paginated
                     :api-url="listUrl">
             <template #cell(name)="row">
                 <h5 class="m-0">{{ row.item.name }}</h5>
@@ -43,7 +43,7 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editmodal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
+    <edit-modal ref="$editModal" :create-url="listUrl" @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
 </template>
 
 <script setup>
@@ -80,20 +80,20 @@ const upper = (data) => {
     return upper.join(' ');
 };
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 
 const relist = () => {
-    datatable.value?.refresh();
+    $dataTable.value?.refresh();
 };
 
-const editmodal = ref(); // EditModal
+const $editModal = ref(); // EditModal
 
 const doCreate = () => {
-    editmodal.value?.create();
+    $editModal.value?.create();
 };
 
 const doEdit = (url) => {
-    editmodal.value?.edit(url);
+    $editModal.value?.edit(url);
 };
 
 const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);
diff --git a/frontend/vue/components/Stations/LiquidsoapConfig.vue b/frontend/vue/components/Stations/LiquidsoapConfig.vue
index 01f3ac159..61fea0196 100644
--- a/frontend/vue/components/Stations/LiquidsoapConfig.vue
+++ b/frontend/vue/components/Stations/LiquidsoapConfig.vue
@@ -81,7 +81,7 @@ const buildForm = () => {
 const {validations, blankForm} = buildForm();
 const {form, resetForm, v$} = useVuelidateOnForm(validations, blankForm);
 
-const loading = ref();
+const loading = ref(true);
 
 const {mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
 
diff --git a/frontend/vue/components/Stations/Media/EditModal.vue b/frontend/vue/components/Stations/Media/EditModal.vue
index 776665bc6..c98d5be9c 100644
--- a/frontend/vue/components/Stations/Media/EditModal.vue
+++ b/frontend/vue/components/Stations/Media/EditModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal-form ref="modal" :loading="loading" :title="$gettext('Edit Media')" :error="error"
+    <modal-form ref="$modal" :loading="loading" :title="$gettext('Edit Media')" :error="error"
                 :disable-save-button="v$.$invalid"
                 @submit="doEdit" @hidden="resetForm">
 
@@ -145,10 +145,10 @@ const resetForm = () => {
     audioUrl.value = '';
 };
 
-const modal = ref(); // BModal
+const $modal = ref(); // BModal
 
 const close = () => {
-    modal.value?.hide();
+    $modal.value?.hide();
 };
 
 const {axios} = useAxios();
@@ -162,7 +162,7 @@ const open = (newRecordUrl, newAlbumArtUrl, newAudioUrl, newWaveformUrl) => {
     audioUrl.value = newAudioUrl;
     waveformUrl.value = newWaveformUrl;
 
-    modal.value?.show();
+    $modal.value?.show();
 
     axios.get(newRecordUrl).then((resp) => {
         let d = resp.data;
diff --git a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
index 47738f57b..f719147ed 100644
--- a/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
+++ b/frontend/vue/components/Stations/Media/Form/WaveformEditor.vue
@@ -6,7 +6,7 @@
     </p>
 
     <b-form-group>
-        <waveform-component ref="waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
+        <waveform-component ref="$waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
                             @ready="updateRegions"></waveform-component>
     </b-form-group>
     <b-form-group>
@@ -56,18 +56,18 @@ const props = defineProps({
     waveformUrl: String
 });
 
-const waveform = ref(); // Waveform
+const $waveform = ref(); // Waveform
 
 const playAudio = () => {
-    waveform.value?.play();
+    $waveform.value?.play();
 };
 
 const stopAudio = () => {
-    waveform.value?.stop();
+    $waveform.value?.stop();
 };
 
 const updateRegions = () => {
-    let duration = waveform.value?.getDuration();
+    let duration = $waveform.value?.getDuration();
 
     let cue_in = props.form.cue_in ?? 0;
     let cue_out = props.form.cue_out ?? duration;
@@ -75,42 +75,42 @@ const updateRegions = () => {
     let fade_in = props.form.fade_in ?? 0;
     let fade_out = props.form.fade_out ?? 0;
 
-    waveform.value?.clearRegions();
+    $waveform.value?.clearRegions();
 
     // Create cue region
-    waveform.value?.addRegion(cue_in, cue_out, 'hsla(207,90%,54%,0.4)');
+    $waveform.value?.addRegion(cue_in, cue_out, 'hsla(207,90%,54%,0.4)');
 
     // Create overlap region
     if (fade_overlap > cue_in) {
-        waveform.value?.addRegion(cue_out - fade_overlap, cue_out, 'hsla(29,100%,48%,0.4)');
+        $waveform.value?.addRegion(cue_out - fade_overlap, cue_out, 'hsla(29,100%,48%,0.4)');
     }
 
     // Create fade regions
     if (fade_in) {
-        waveform.value?.addRegion(cue_in, fade_in + cue_in, 'hsla(351,100%,48%,0.4)');
+        $waveform.value?.addRegion(cue_in, fade_in + cue_in, 'hsla(351,100%,48%,0.4)');
     }
     if (fade_out) {
-        waveform.value?.addRegion(cue_out - fade_out, cue_out, 'hsla(351,100%,48%,0.4)');
+        $waveform.value?.addRegion(cue_out - fade_out, cue_out, 'hsla(351,100%,48%,0.4)');
     }
 };
 
 const setCueIn = () => {
-    let currentTime = waveform.value?.getCurrentTime();
+    let currentTime = $waveform.value?.getCurrentTime();
 
     props.form.cue_in = Math.round((currentTime) * 10) / 10;
     updateRegions();
 };
 
 const setCueOut = () => {
-    let currentTime = waveform.value?.getCurrentTime();
+    let currentTime = $waveform.value?.getCurrentTime();
 
     props.form.cue_out = Math.round((currentTime) * 10) / 10;
     updateRegions();
 };
 
 const setFadeOverlap = () => {
-    let duration = waveform.value?.getDuration();
-    let currentTime = waveform.value?.getCurrentTime();
+    let duration = $waveform.value?.getDuration();
+    let currentTime = $waveform.value?.getCurrentTime();
     let cue_out = form.value?.cue_out ?? duration;
 
     props.form.fade_overlap = Math.round((cue_out - currentTime) * 10) / 10;
@@ -118,7 +118,7 @@ const setFadeOverlap = () => {
 };
 
 const setFadeIn = () => {
-    let currentTime = waveform.value?.getCurrentTime();
+    let currentTime = $waveform.value?.getCurrentTime();
     let cue_in = form.value?.cue_in ?? 0;
 
     props.form.fade_in = Math.round((currentTime - cue_in) * 10) / 10;
@@ -126,8 +126,8 @@ const setFadeIn = () => {
 }
 
 const setFadeOut = () => {
-    let currentTime = waveform.value?.getCurrentTime();
-    let duration = waveform.value?.getDuration();
+    let currentTime = $waveform.value?.getCurrentTime();
+    let duration = $waveform.value?.getDuration();
     let cue_out = form.value?.cue_out ?? duration;
 
     props.form.fade_out = Math.round((cue_out - currentTime) * 10) / 10;
diff --git a/frontend/vue/components/Stations/Mounts.vue b/frontend/vue/components/Stations/Mounts.vue
index 2019c25f1..544a76c2f 100644
--- a/frontend/vue/components/Stations/Mounts.vue
+++ b/frontend/vue/components/Stations/Mounts.vue
@@ -19,7 +19,7 @@
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_mounts" :fields="fields" paginated
+        <data-table ref="$dataTable" id="station_mounts" :fields="fields" paginated
                     :api-url="listUrl">
             <template #cell(display_name)="row">
                 <h5 class="m-0">
@@ -53,7 +53,7 @@
         </data-table>
     </b-card>
 
-    <edit-modal ref="editmodal" :create-url="listUrl" :new-intro-url="newIntroUrl"
+    <edit-modal ref="$editModal" :create-url="listUrl" :new-intro-url="newIntroUrl"
                 :show-advanced="showAdvanced" :station-frontend-type="stationFrontendType"
                 @relist="relist" @needs-restart="mayNeedRestart"></edit-modal>
 </template>
@@ -90,20 +90,20 @@ const fields = [
     {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
 ];
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 
 const relist = () => {
-    datatable.value.refresh();
+    $dataTable.value.refresh();
 };
 
-const editmodal = ref(); // EditModal
+const $editModal = ref(); // EditModal
 
 const doCreate = () => {
-    editmodal.value.create();
+    $editModal.value.create();
 };
 
 const doEdit = (url) => {
-    editmodal.value.edit(url);
+    $editModal.value.edit(url);
 };
 
 const {needsRestart, mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
diff --git a/frontend/vue/components/Stations/Profile/EmbedModal.vue b/frontend/vue/components/Stations/Profile/EmbedModal.vue
index f3790380b..a463e85d4 100644
--- a/frontend/vue/components/Stations/Profile/EmbedModal.vue
+++ b/frontend/vue/components/Stations/Profile/EmbedModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal size="lg" id="embed_modal" ref="modal" :title="$gettext('Embed Widgets')" hide-footer no-enforce-focus>
+    <b-modal size="lg" id="embed_modal" ref="$modal" :title="$gettext('Embed Widgets')" hide-footer no-enforce-focus>
         <b-row>
             <b-col md="7">
                 <b-card class="mb-3" no-body>
@@ -175,10 +175,10 @@ const embedCode = computed(() => {
     return '<iframe src="' + embedUrl.value + '" frameborder="0" allowtransparency="true" style="width: 100%; min-height: ' + embedHeight.value + '; border: 0;"></iframe>';
 });
 
-const modal = ref(); // Template Ref
+const $modal = ref(); // Template Ref
 
 const open = () => {
-    modal.value.show();
+    $modal.value.show();
 };
 
 defineExpose({
diff --git a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
index 134676e62..f4109e091 100644
--- a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
+++ b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
@@ -56,7 +56,7 @@
                     {{ $gettext('Disable') }}
                 </a>
             </div>
-            <embed-modal v-bind="$props" ref="embed_modal"></embed-modal>
+            <embed-modal v-bind="$props" ref="$embedModal"></embed-modal>
         </template>
         <template v-else>
             <div class="card-header bg-primary-dark">
@@ -95,9 +95,9 @@ const props = defineProps({
     ...embedModalProps
 });
 
-const embed_modal = ref(); // Template Ref
+const $embedModal = ref(); // Template Ref
 
 const doOpenEmbed = () => {
-    embed_modal.value.open();
+    $embedModal.value.open();
 };
 </script>
diff --git a/frontend/vue/components/Stations/ProfileEdit.vue b/frontend/vue/components/Stations/ProfileEdit.vue
index d8aeb2f97..946d159c7 100644
--- a/frontend/vue/components/Stations/ProfileEdit.vue
+++ b/frontend/vue/components/Stations/ProfileEdit.vue
@@ -6,7 +6,7 @@
             </h3>
         </div>
 
-        <admin-stations-form v-bind="$props" ref="form" :is-edit-mode="true" :edit-url="editUrl"
+        <admin-stations-form v-bind="$props" ref="$form" :is-edit-mode="true" :edit-url="editUrl"
                              @submitted="onSubmitted"></admin-stations-form>
     </section>
 </template>
@@ -25,10 +25,10 @@ const props = defineProps({
     }
 });
 
-const form = ref(); // AdminStationsForm
+const $form = ref(); // AdminStationsForm
 
 onMounted(() => {
-    form.value?.reset();
+    $form.value?.reset();
 });
 
 const onSubmitted = () => {
diff --git a/frontend/vue/components/Stations/Queue/LogsModal.vue b/frontend/vue/components/Stations/Queue/LogsModal.vue
index 7288e68da..d2e53be26 100644
--- a/frontend/vue/components/Stations/Queue/LogsModal.vue
+++ b/frontend/vue/components/Stations/Queue/LogsModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal id="logs_modal" ref="modal" :title="$gettext('Log Viewer')">
+    <b-modal id="logs_modal" ref="$modal" :title="$gettext('Log Viewer')">
         <textarea class="form-control log-viewer" spellcheck="false" readonly>{{ logs }}</textarea>
 
         <template #modal-footer>
@@ -18,7 +18,7 @@ import {ref} from "vue";
 import {useClipboard} from "@vueuse/core";
 
 const logs = ref('Loading...');
-const modal = ref(); // Template Ref
+const $modal = ref(); // Template Ref
 
 const show = (newLogs) => {
     let logDisplay = [];
@@ -27,7 +27,7 @@ const show = (newLogs) => {
     });
 
     logs.value = logDisplay.join('');
-    modal.value.show();
+    $modal.value.show();
 };
 
 const clipboard = useClipboard();
@@ -37,7 +37,7 @@ const doCopy = () => {
 };
 
 const close = () => {
-    modal.value.hide();
+    $modal.value.hide();
 }
 
 defineExpose({
diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue
index 1b0341be3..46c220905 100644
--- a/frontend/vue/components/Stations/Remotes.vue
+++ b/frontend/vue/components/Stations/Remotes.vue
@@ -19,7 +19,7 @@
             </b-button>
         </b-card-body>
 
-        <data-table ref="datatable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
+        <data-table ref="$dataTable" id="station_remotes" paginated :fields="fields" :api-url="listUrl">
             <template #cell(display_name)="row">
                 <h5 class="m-0">
                     <a :href="row.item.url" target="_blank">{{ row.item.display_name }}</a>
@@ -47,7 +47,7 @@
         </data-table>
     </b-card>
 
-    <remote-edit-modal ref="editmodal" :create-url="listUrl"
+    <remote-edit-modal ref="$editModal" :create-url="listUrl"
                        @relist="relist" @needs-restart="mayNeedRestart"></remote-edit-modal>
 </template>
 
@@ -78,20 +78,20 @@ const fields = [
     {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
 ];
 
-const datatable = ref(); // DataTable
+const $dataTable = ref(); // DataTable
 
 const relist = () => {
-    datatable.value?.refresh();
+    $dataTable.value?.refresh();
 };
 
-const editmodal = ref(); // EditModal
+const $editModal = ref(); // EditModal
 
 const doCreate = () => {
-    editmodal.value?.create();
+    $editModal.value?.create();
 };
 
 const doEdit = (url) => {
-    editmodal.value?.edit(url);
+    $editModal.value?.edit(url);
 };
 
 const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);
diff --git a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
index a3a4629be..d6dfe477f 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/InnerMap.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="leaflet-container" ref="container">
+    <div id="leaflet-container" ref="$container">
         <slot v-if="$map" :map="$map"/>
     </div>
 </template>
@@ -22,7 +22,7 @@ const props = defineProps({
     attribution: String
 });
 
-const container = ref(); // Template Ref
+const $container = ref(); // Template Ref
 const $map = shallowRef();
 
 provide('map', $map);
@@ -40,7 +40,7 @@ onMounted(() => {
     });
 
     // Init map
-    const map = L.map(container.value);
+    const map = L.map($container.value);
     map.setView([40, 0], 1);
 
     $map.value = map;
diff --git a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
index 619196588..8afab3190 100644
--- a/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners/MapPoint.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="content">
+    <div ref="$content">
         <slot/>
     </div>
 </template>
@@ -18,10 +18,10 @@ const marker = L.marker(props.position);
 marker.addTo(map);
 
 const popup = new L.Popup();
-const content = ref(); // Template Ref
+const $content = ref(); // Template Ref
 
 watch(
-    content,
+    $content,
     (newContent) => {
         popup.setContent(newContent);
         marker.bindPopup(popup);