updating modelValue from the child component inside the v-for loop vue3

Question

When I'm changing (updating) the modelValue from the child component into the parent component it changes values back in all of the looped (with v-for) child components values. So when I change from 15 to 25 - the value 25 is changed in all of the child components but not in the single one I intended to.

//Parent component
 <script setup>
   const options = ref(['15', '25', '30'])
  let selectedOption = ref('15')
<script>
<template>
  <div class="product" 
    v-for="product in productsStore.cart" 
    :key="product.id">
    <SelectComponent 
      :options="options"
      v-model="selectedOption"/>
   </div>
</template>

//Child component
<script setup>
const props= defineProps({
    options: {
      type: Array
    },
    modelValue: {
      type: String,
      required: true,
      default: '15' 
    }
  })
  const emits = defineEmits(['update:modelValue'])
  
  const selectOption = (option) => {
    emits('update:modelValue', option)
  }
</script>
<template>
  <h4 class="list--title">{{ props.modelValue }}</h4>
  <p class="list__options-item list--sorting-options-item" 
     v-for="option in props.options" 
     :key="option"
     @click="() => selectOption(option)"
     >{{option}}
   </p>
</template>