How to detect changes in elements of an array passed as props in vue?

Question

I'm working on a simple business card making project with a view.

But I met one problem.

I want to lower the array of objects with names and ages that the parent component has so that they can be printed and modified in the name-tag component.

The Save button is in the parent component, but is there a way to detect the modified values in each name-tag component?

//parent
<template>
    <div v-for="item in list" :key="item.id">
        <name-tag :name="item"></name-tag>
    </div>
    <button>save</button>
</template>

 data(){
      return {
          list:[{name:'jimmy', age:25},{name:'tom', age:21},{name:'dick', age:22},{name:'elly', age:19},]
      }
  }

//NameTag
<template>
    <div>
        <div>
            <span>{{named}}</span>
            <input type="text" v-model="named"/>
            <br/>
            <span>{{age}}</span>
            <input type="text" v-model="age"/>
        </div>
    </div>
</template>

<script>
    export default {
        props:['name'],
        watch:{
            name(val){
                this.named= val.name,
                this.age = val.age,
            }
        }
        data(){
            return {
                named:'',
                age:0
            }
        }
    }
</script>

In other words, it is curious to modify each value in the list array to detect changes in the parent component.