How to pass a Vue prop into a child component while using v-for?

When passing a Vue prop into a child component while using v-for, the child component appears on the page but does not display the prop. There are no errors present in the browser console. Any help would be greatly appreciated.

The component passing the prop:

<template>
    <div class="col" ref="participants-window">
        
    <div>
        <user 
        v-for="(username, index) in participants"
        v-bind:username="username"
        v-bind:index="index"
        > </user>
    </div>     
    </div>
</template>

<script>
export default {
    props: ['participants'],
    
    data() {
      return {
         show: true,
         username: null
     }      
},
    
    mounted() {
    this.scrollToBottom();
},

watch: {
    messages() {
        this.scrollToBottom();
    }
},

methods: {
    scrollToBottom() {
        this.$nextTick(() => {
            this.$refs['participants-window'].scrollTop = this.$refs['participants-window'].scrollHeight;
        });
    }
},
} 

</script>

<style scoped>

.col {
    overflow-y: auto;
    max-height: 200px;
    word-wrap: break-word;
}
</style>

The component receiving the prop:

<template>
  <div class="text-center">
  <b-button id="tooltip-button-2" variant="primary">{{ username }}</b-button>
  <b-tooltip show target="tooltip-button-2">tooltip</b-tooltip>
  </div>
</template>
<script>

 props: ['username']

  export default {
    data() {
      return {
         show: true,
         username: null
     }      
  }
}
</script>

You need to put props inside the export default. Also you can't have a prop and data with the same name.

This is what you can do

export default {
    props: ['username'],

    data() {
      return {
         show: true
     }      
  }

You also don't need the data username in your first component, the username will pass to user if defined in participants