Vue 3: Why Is v-model Not Updating Dynamically Generated <select> Elements?

I have an indefinite number of elements generated dynamically using v-for, and I need to track changes on each one using v-model. Here's the relevant HTML code: <!-- Options --> <div class="size-box" v-for="(values, optionName) in product.values" :key="optionName"> <h4>{{ optionName }}</h4> <div class="d-flex align-items-center"> <div class="size-select language"> <select v-model="selectedValues[optionName]"> <option v-for="value in values" :key="value.id" :value="value.id"> {{ value.name }} </option> </select> </div> </div> </div> <!-- Add to Cart --> <div class="shop-details-top-cart-box-btn"> <button class="btn--primary style2" type="button" @click="addToCart" > Add to Cart </button> </div> The photo shows the structure of the received data. Below is the script section: <script> import { getProduct } from "@/services/productService"; export default { name: "Show", data() { return { product: null, currentSku: null, selectedValues: {}, isProductReady: false, }; }, async created() { await this.fetchProduct(); }, methods: { async fetchProduct() { try { const id = this.$route.params.id; this.product = await getProduct(id); console.log(this.product); if (this.product && this.product.values) { Object.keys(this.product.values).forEach((optionName) => { const firstValue = this.product.values[optionName][0]; if (firstValue) { this.selectedValues[optionName] = firstValue.id; } }); this.updateSku(); console.log(this.currentSku); } this.$nextTick(() => { this.isProductReady = true; this.triggerLocalChange(); }); } catch (error) { console.error("Failed to load product:", error); } }, updateSku() { if (!this.product || !this.product.skus) return; const matchingSku = this.product.skus.find((sku) => { return sku.values.every( (value) => this.selectedValues[value.option_name] === value.value_id ); }); this.currentSku = matchingSku || null; }, addToCart() { if (this.currentSku) { console.log( "Added to cart", this.selectedValues, ); } else { console.log("Please select valid options first."); } }, triggerLocalChange() { if (this.isProductReady) { $(document).trigger("change"); } }, }, mounted() { this.$nextTick(() => { if (!this.isProductReady) { console.log("DOM updated but product data is not fully loaded yet."); } }); }, }; </script> Here's the JSON response from the backend: { "name": "Test Product", "manufacturer": "Nike", "values": { "Color": { "0": { "id": 1, "name": "Green" }, "2": { "id": 8, "name": "White" }, "4": { "id": 10, "name": "Brown" } }, "Clothes Size": [ { "id": 15, "name": "M" }, { "id": 16, "name": "L" } ] } } I intended for changing a value on any to update the currentSku accordingly. However, the values in selectedValues do not update as expected. I've tried initializing selectedValues with the first available value for each option, but it appears that v-model isn't binding correctly for some selects. I'm new to Vue, so any help understanding and resolving this issue is appreciated.