fix: we shouldn’t use $-prefixed variables in script-setup components

src/components/ShowSelector.vue

@@ -32,7 +32,7 @@
         v-if="isSuperUser"
         v-b-popover.hover.top="t('showCreator.title')"
         variant="primary"
-        @click="$refs.addShowModal.openModal()"
+        @click="addShowModal.openModal()"
       >
         <template v-if="selectedShow">+</template>
         <template v-else>{{ t('showCreator.title') }}</template>
@@ -44,7 +44,7 @@
 <script setup>
 import { sort } from 'fast-sort'
 import { useStore } from 'vuex'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 // Move this into main.js if v-select is used a second time.
 import VSelect from 'vue-select'
@@ -58,6 +58,8 @@ const store = useStore()
 const { t } = useI18n()
 const isSuperUser = useIsSuperUser()
 const selectedShow = useSelectedShow()
+
+const addShowModal = ref()
 const loaded = computed(() => ({
   shows: store.state.shows.loaded.shows,
   types: store.state.shows.loaded.types,