Vue 3 Props is not working on child components after binding it correctly. It returns undefined in child component

I am new to Vue and Laravel. This is my parent element, I am getting items from the database which is working fine. Then bind it to the child component.

<template>
  <div class="todoListContainer">
    <div class="heading">
      <h2 id="title">Todo List</h2>
      <AddItemForm></AddItemForm>
    </div>
    <ListView 
    v-bind:items="items"/>
  </div>
</template>

<script>

import AddItemForm from "./AddItemForm.vue"
import ListView from "./ListView.vue"

export default {
  components: {
    AddItemForm,
    ListView
  },
  mounted() {
    this.getList()
    console.log(this)
  },
  data() {
    return {
      items: [], // Stored all the items in an array and i binded it on ListView Component
    }
  },
  methods: {
    getList: function  () {
      axios.get('api/items')
      .then(response => {
        this.items = response.data
        console.log( this.items )
      })

      console.log( this.items )
    }
  }
}
</script>

In my Child components, when I try to console log the props it returns undefined. Below is my ListView child component.

<template>
  <div>
    <div 
    v-for="{item, index} in items" :key="index">
      <ListItem 
      v-bind:item="item" class="item"/>
    </div>
  </div>
</template>

<script>
  import ListItem from './ListItem.vue'
export default {
  // Props not working
  // On line 4 i looped through the items and then bind it to ListItem component
  props: [ 'items' ],
  components: {
    ListItem
  },
  created() {
    console.log( this.items )
  }

}
</script>

I have done everything by the book. Creating a method for collecting all the data and bind it to the child component.

Can someone help me on this?