Vue.js - TypeError: Cannot read property 'title' of undefined

Question

I do not seem to know the solution of this error. I tried changing the title to 'title' still its the same error

methods.vue:

<template>
    <div>
       <h1>we can have some data here, data number {{ counter }}</h1> 
       <button @click="UpdateCounter(1)">Up</button>
           <button @click="UpdateCounter(-1)">Down</button>
           <div v-for="(peoples,i) in people" :key="i" v-if="people.length">
               <h1>{{info.title}}</h1>
           </div>
    </div>
</template>

<script>
export default {
data() {
    return {
    counter:0,
    people:[],
    }
},
methods: {
    UpdateCounter(number){
    this.counter+=number;
    },

},
created() {
let info =[
    {title:'harout', 'surname':'deurdulian' , id:1},
    {title:'set', 'surname':'deurdulian' , id:2},
    {title:'meg', 'surname':'mav' , id:3},
    {title:'sevag', 'surname':'mav' , id:4},
]
this.people=info
},
}
</script>

Answer 1

The error is caused by this line <h1>{{info.title}}</h1> :

    <div v-for="(peoples,i) in people" :key="i" v-if="people.length">
               <h1>{{info.title}}</h1>
           </div>

change it to <h1>{{peoples.title}}</h1> because the info is undefined as a property in the component options.