Fixing v-model Reactivity with Dynamic Selects in Vue 3

Learn how to correctly bind multiple dynamically generated selects in Vue 3 using reactive objects instead of arrays for `v-model` to ensure reactivity.
---
This video is based on the question https://stackoverflow.com/q/79385101/ asked by the user 'viktoriya ivanets' ( https://stackoverflow.com/u/18607540/ ) and on the answer https://stackoverflow.com/a/79385106/ provided by the user 'Estus Flask' ( https://stackoverflow.com/u/3731501/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Vue 3.1.12 - v-model doesn't work with dynamic generated select

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
The Problem: Non-Reactive v-model on Dynamic Selects in Vue 3

When dynamically generating multiple <select> elements in Vue 3 and binding their values using v-model to track selections, you might notice that changing the selects doesn't update your data as expected. This is often because the data property bound to v-model is not properly reactive.

Scenario

Multiple selects are generated via v-for based on a product.values object.

Each select’s v-model is bound to a property of an object called selectedValues.

On changing a select, you expect selectedValues to update and subsequently update currentSku.

However, changes to selectedValues aren’t triggering reactivity.

Root Cause

This typically happens when selectedValues is initialized as an array but used like an object:

[[See Video to Reveal this Text or Code Snippet]]

In JavaScript, arrays are objects with numeric indices as keys. Vue 3's reactivity system tracks array indices, but adding non-numeric keys to an array (like string keys) is not reactive because these keys aren’t part of its reactive array structure.

Since your keys (optionName) are strings (e.g. "Color", "Clothes Size"), using an array breaks reactivity.

Correct Approach

Initialize selectedValues as an Object

Vue 3's reactivity works perfectly when selectedValues is a plain object with dynamic string keys.

[[See Video to Reveal this Text or Code Snippet]]

How to Set Defaults

When loading product options:

[[See Video to Reveal this Text or Code Snippet]]

This ensures each select option's initial value is set reactively.

Template Binding Example

[[See Video to Reveal this Text or Code Snippet]]

Use Object.values(values) to iterate over values regardless of whether they're arrays or objects.

Bind v-model directly to selectedValues[optionName].

Additional Tips

Reactivity: Vue 3 uses proxies which react well to added properties in reactive objects.

Data Consistency: Always treat selectedValues as an object with string keys to avoid confusion.

Updating Dependent Data: Watch selectedValues to update currentSku when options change.

[[See Video to Reveal this Text or Code Snippet]]

Summary

Use a plain object for dynamic keys instead of an array.

Initialize selectedValues as {}.

Carefully process product values to handle object or array shapes.

Bind v-model correctly in the template.

This approach ensures your dynamic selects update the Vue component state reactively and your SKU selection logic works as intended.