fix: global reactive attrs

change to ref for primitive types, use provide/inject instead of globalConfig

src/components/CAPTCHA.vue

@@ -5,6 +5,8 @@ import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";
 import VueTurnstile from 'vue-turnstile';
 
+const $darkMode = inject('$darkMode');
+
 const { handleReset: handleRecaptchaReset } = useRecaptcha();
 
 const props = defineProps({

src/components/Navbar.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { useRouter, RouterLink } from 'vue-router';
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 import { useAuthStore } from '../stores/auth';
 
+const $isMobile = inject('$isMobile');
+
 const router = useRouter();
 const authStore = useAuthStore();
 

src/lib/darkMode.js

@@ -1,14 +1,14 @@
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 const darkModeMediaQuery = '(prefers-color-scheme: dark)';
 const matchMedia = window.matchMedia(darkModeMediaQuery);
 
-const darkMode = reactive(matchMedia.matches);
+const darkMode = ref(matchMedia.matches);
 
 matchMedia.addEventListener('change', (event) => {
-  darkMode = event.matches;
+  darkMode.value = event.matches;
 });
 
 export const install = (app) => {
- app.config.globalProperties.$darkMode = darkMode;
+  app.provide('$darkMode', darkMode);
 }

src/lib/isMobile.js

@@ -1,14 +1,14 @@
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 const mobileMediaQuery = 'screen and (max-width: 768px)';
 const matchMedia = window.matchMedia(mobileMediaQuery);
 
-const isMobile = reactive(matchMedia.matches);
+const isMobile = ref(matchMedia.matches);
 
 matchMedia.addEventListener('change', (event) => {
-  isMobile = event.matches;
+  isMobile.value = event.matches;
 });
 
 export const install = (app) => {
- app.config.globalProperties.$isMobile = isMobile;
+  app.provide('$isMobile', isMobile);
 }