fix: make serverFeatureFlags reactive via Vue ref (#9051)

src/scripts/api.ts

@@ -2,6 +2,7 @@ import { promiseTimeout, until } from '@vueuse/core'
 import axios from 'axios'
 import { get } from 'es-toolkit/compat'
 import { trimEnd } from 'es-toolkit'
+import { ref } from 'vue'
 
 import defaultClientFeatureFlags from '@/config/clientFeatureFlags.json' with { type: 'json' }
 import type {
@@ -340,7 +341,7 @@ export class ComfyApi extends EventTarget {
   /**
    * Feature flags received from the backend server.
    */
-  serverFeatureFlags: Record<string, unknown> = {}
+  serverFeatureFlags = ref<Record<string, unknown>>({})
 
   /**
    * The auth token for the comfy org account if the user is logged in.
@@ -695,10 +696,10 @@ export class ComfyApi extends EventTarget {
               break
             case 'feature_flags':
               // Store server feature flags
-              this.serverFeatureFlags = msg.data
+              this.serverFeatureFlags.value = msg.data
               console.log(
                 'Server feature flags received:',
-                this.serverFeatureFlags
+                this.serverFeatureFlags.value
               )
               this.dispatchCustomEvent('feature_flags', msg.data)
               break
@@ -1291,7 +1292,7 @@ export class ComfyApi extends EventTarget {
    * @returns true if the feature is supported, false otherwise
    */
   serverSupportsFeature(featureName: string): boolean {
-    return get(this.serverFeatureFlags, featureName) === true
+    return get(this.serverFeatureFlags.value, featureName) === true
   }
 
   /**
@@ -1301,7 +1302,7 @@ export class ComfyApi extends EventTarget {
    * @returns The feature value or default
    */
   getServerFeature<T = unknown>(featureName: string, defaultValue?: T): T {
-    return get(this.serverFeatureFlags, featureName, defaultValue) as T
+    return get(this.serverFeatureFlags.value, featureName, defaultValue) as T
   }
 
   /**
@@ -1309,7 +1310,7 @@ export class ComfyApi extends EventTarget {
    * @returns Copy of all server feature flags
    */
   getServerFeatures(): Record<string, unknown> {
-    return { ...this.serverFeatureFlags }
+    return { ...this.serverFeatureFlags.value }
   }
 
   async getFuseOptions(): Promise<IFuseOptions<TemplateInfo> | null> {