[BUG] Dynamic SfComponentSelect fails when previous state had more options

[InnaBoitsun]

Describe the bug
When there are two SfComponentSelect components, the second one is dynamic and depends on the first one selected value, it will fail on update when the previous state had more options than the current state.
Example: Country and Regions. When a country is selected, the Region options are updated.

How to reproduce
Steps to reproduce the behavior:

1. Have two SfComponentSelect on one page: Country and Regions
2. The Regions have dynamic options based on the Country's selected value.
3. The Country has options [ "Country1", "Country2"]. If the Country1 is selected, the Regions has options ["Region11", "Region12", "Region13"]. If the Country2 is selected, the Regions has options ["Region21", "Region22"].
4. Select Country1 - Regions have 3 options
5. Select Region11
6. Select Country 2 Regions have 2 options
7. Try selecting Region21 option

Expected behavior
The option value is selected

Actual behavior
Error: Cannot read properties of undefined (reading 'value')
at VueComponent.set [as index] (SfComponentSelect.vue?89c9:163:1)
at VueComponent.update (SfComponentSelect.vue?89c9:212:1)

Code examples
Sample code (or your configuration) to help us reproduce the bug faster or to understand your use case.

<SfComponentSelect
          v-model="form.countryCode"
          name="countryCode"
          :label="$t('Country')"
          required
>
          <SfComponentSelectOption
            v-for="{isoCode, name} in countries"
            :key="isoCode"
            :value="isoCode">
              {{ name || isoCode }}
          </SfComponentSelectOption>
        </SfComponentSelect>

<SfComponentSelect
          v-model="form.regionCode"
          name="regionCode"
          :label="$t('State/Province')"
          required

            <SfComponentSelectOption
              v-for="{isoCode, name} in getRegions(form.countryCode)"
              :key="isoCode"
              :value="isoCode"
                >
              {{ name || isoCode }}
            </SfComponentSelectOption>
        </SfComponentSelect>

Screenshots

Additional context
The issue is because of this line of code:
Line of code:

storefront-ui/packages/vue/src/components/molecules/SfComponentSelect/SfComponentSelect.vue

Line 202 in be0632a

this.$slots.default.length > this.options.length

When the previous state has more options, then indexes for the current state will not be updated and the index for the selected value will be undefined.

The possible fix can be next:
replace line:
this.$slots.default.length > this.options.length

with

this.$slots.default.length !== this.options.length

┆Issue is synchronized with this Jira Task by Unito