fix(stage-web): fetch model on active provider change

Author: sumimakito

apps/stage-web/src/pages/settings/modules/consciousness.vue

@@ -3,7 +3,7 @@ import { Alert, ErrorContainer, RadioCardManySelect, RadioCardSimple } from '@pr
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
+import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
@@ -23,9 +23,9 @@ const {
 
 const { t } = useI18n()
 
-onMounted(async () => {
-  await consciousnessStore.loadModelsForProvider(activeProvider.value)
-})
+watch(activeProvider, async (provider) => {
+  await consciousnessStore.loadModelsForProvider(provider)
+}, { immediate: true })
 
 function updateCustomModelName(value: string) {
   customModelName.value = value
@@ -91,6 +91,8 @@ function updateCustomModelName(value: string) {
 
     <!-- Model selection section -->
     <div v-if="activeProvider && supportsModelListing">
+      {{ providerModels }}
+
       <div flex="~ col gap-4">
         <div>
           <h2 class="text-lg md:text-2xl">