Using Vue3 to implement an efficient way to reset specific value in array?

How to Using Vue3 to implement an efficient way to reset specific value in array? I am trying to copy origin data for temporary storage, then make it immutable and reset value, or other methods to implement this?

Vue SFC Playground

<script setup>
import { ref, computed, toRaw, watch } from 'vue';
const selected = ref(null)

const data = ref([{
  id: 1,
  label: 'A',
  value: 'A',
  name: 'Student A'
}, {
  id: 2,
  label: 'B',
  value: 'B',
  name: 'Student B'
}, {
  id: 3,
  label: 'C',
  value: 'C',
  name: 'Student C'
}])

const initData = structuredClone(toRaw(data.value.reduce((acc, item) => {
  acc[item.id] = item.value;
  return acc;
}, {})))

watch(selected, (v) => {
  if (v === null) {
    data.value.forEach(item => item.value = initData[item.id])
  } else {
    data.value.forEach(item => item.value = v)
  }
})
</script>

<template>
  <div>
    <select v-model="selected">
      <option :value="null">Init Value</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>

    <template v-for="(item, idx) in data" :key="idx">
      <div style="display:flex ; align-items: center;margin-bottom: 16px;">
        <div style="margin-right:16px;"> Name:{{ item.name }}</div>
        <select :value="item.value" @change="updateValue(item.id, $event.target.value)">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
    </template>
  </div>
</template>

Your wording is not clear, but I think you're asking if your working code could be made better?

If so, my first advice would be to replace the reduce with map. Map is for transforming each element of an array, while reduce is usually meant to merge all values of an array into a single value. What you are doing is mapping but incorrectly using the reduce function to do it. toRaw and structuredClone are also completely unnecessary.

Second would be to replace watch with a function. Reacting to an events, especially user interactions, is what functions are good for. It is not the use case for watch, which is usually meant for reacting to prop changes or reacting to the result of asynchronous operations (a general rule is, only if you can't do what you want with a function or computed property, then use watch).

const initData = data.value.map(item => item.value)

const valueSelected = () => {
  if (selected.value === null) {
    data.value.forEach((item, i) => item.value = initData[i])
  } else {
    data.value.forEach(item => item.value = selected.value)
  }
}

<select v-model="selected" @change="valueSelected">

updated Playground