How to watch an array props value changes?

Here is my main component. I have an array and ı want to send it to my child component to fill necessary fields. I sent it with named infos prop.

<template>
    <list-form :infos="infos"/>
</template>
<script>

export default {
   data(){

      return(){
         infos:[
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false}
               ]
      }  
   }
}
</script>

Here is my child component I get my prop in here and i used inside v-for loop.

<template>
  <v-row v-for="(info,i) in infos" :key="'list-item-'+i">
    
    <v-col cols="6"><v-text-field v-model="info.name"/></v-col>

    <v-col cols="6" > <v-text-field v-model="info.surName"/></v-col>

    <v-col cols="6">
       <v-menu v-model="info.menu"
                            :close-on-content-click="false"
                            transition="scale-transition"
                            offset-y
                            max-width="290px"
                            min-width="auto">

                        <template v-slot:activator="{ on,  attrs }">
                            <v-text-field v-model="info.dateFormatted"
                                          label="date"
                                          placeholder="GG/AA/YYYY"
                                          v-bind="attrs"
                                          v-on="on"/>
                        </template>

                        <v-date-picker
                            v-model="info.date"
                            no-title
                            @input="info.menu = false"
                        />
        </v-menu> 
   </v-col>

  </v-row> 
</template>


export default {
props:{
   infos:{
          type:Array
         }
    }, 
    watch: {
       **//the problem is in here**
         date() {
             this.dateFormatted = this.formatDate(date)
        }, 
    },
    methods: {
        formatDate(date) {
            if (!date) return null
            const [year, month, day] = date.split('-')
            return `${month}/${day}/${year}`
        }
    } 
}
</script>

I want to take date changes. If date changed i want to change its format . but I think it has a different way to catch changes in props. I tried some ways for this stuation but ı could not find true way.

Normally ı can get changes inside watch but i cant take changes with this way