Issue: Model Selection Dropdown Conflict

Title

v-select throws "Invalid prop: type check failed" error when selecting model in MiscConfigCard

Description

The Model Selection dropdown in the Miscelaneous Configuration card has a critical bug where the v-model and :items props are bound to the same variable (models). This causes the component to break when a user selects or deselects a model option.

When a user selects a model from the dropdown, the array of model options gets overwritten with the selected string value, causing Vue to throw a type error. Additionally, when the selection is cleared, the dropdown shows "no data available" because the items array has been replaced.

Original Behaviour

1. User opens the calibration configuration page
2. User clicks on the Model Selection dropdown - sees list of models
3. User selects a model (e.g., "Ridge Regression")
4. Vue throws error: [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got String
5. User clicks the clear button (X) to deselect
6. Dropdown shows: "no data available" - no models are visible anymore
7. The component is now broken and cannot be used properly

Root Cause: Both v-model and :items were bound to the same models variable:

<v-select v-model="models" :items="models" ... />

This creates a conflict where:

• models starts as an array: ['Linear Regression', 'Ridge Regression', ...]
• On selection, v-model overwrites it with a string: "Ridge Regression"
• Vue expects an array for :items but receives a string → error
• On clear, models becomes null → no items to display

Expected Behaviour

1. User opens the calibration configuration page
2. User clicks on the Model Selection dropdown - sees list of all available models
3. User selects a model (e.g., "Ridge Regression")
4. No errors - selection works smoothly
5. The selected model is displayed in the dropdown
6. User can clear the selection using the clear button (X)
7. Dropdown still shows all available models when reopened
8. User can select a different model at any time
9. The selected model value is properly stored in Vuex store

Files Changed

• src/components/calibration/MiscConfigCard.vue

Solution Applied

Separated the conflicting variable into two distinct variables:

• selectedModel: Stores the currently selected model value (used with v-model)
• modelOptions: Stores the array of available model options (used with :items)

This ensures the items array remains intact while the selected value can change independently.
Before Fix :-

After fix:-