Inject native router only in reactive scopes (#1730)

components/ui/CollectionCreateModal.vue

@@ -42,7 +42,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const description = ref('')

components/ui/ModerationChecklist.vue

@@ -996,9 +996,9 @@ async function sendMessage(status) {
   stopLoading()
 }
 
-async function goToNextProject() {
-  const router = useRouter()
+const router = useNativeRouter()
 
+async function goToNextProject() {
   const project = props.futureProjects[0]
 
   if (!project) {

components/ui/OrganizationCreateModal.vue

@@ -56,7 +56,7 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
-const router = useRouter()
+const router = useNativeRouter()
 
 const name = ref('')
 const slug = ref('')

components/ui/VersionFilterControl.vue

@@ -98,6 +98,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['switch-page'])
 
+const router = useNativeRouter()
 const route = useNativeRoute()
 
 const tags = useTags()
@@ -130,9 +131,6 @@ const selectedLoaders = shallowRef(getArrayOrString(route.query.l) ?? [])
 const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
 
 async function updateQuery() {
-  const router = useRouter()
-  const route = useNativeRoute()
-
   await router.replace({
     query: {
       ...route.query,

components/ui/charts/ChartDisplay.vue

@@ -308,7 +308,7 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#c
 
 import PaletteIcon from '~/assets/icons/palette.svg?component'
 
-const router = useRouter()
+const router = useNativeRouter()
 const theme = useTheme()
 
 const props = withDefaults(