What is the correct way to retrieve data from 2 or more identical components?

Evening. I've created a button which adds a component that has an input field inside. I might need to press that button few times so there would be 2-3 input fields that appear. Whenever I type the text I would like to send a request from the parent component but I don't know how to retrieve the data from every child component that has been created. Is this the time to start using vuex (never used it)?

ParentComponent.vue
<template>

<div>

<button class=“btn btn-success” @click=“addStep”>Add step</button>

<div v-for=“i in count”>

<recipe-step v-bind:step-number=“i”></recipe-step>

</div>

</div>

</template>
<script>

export default {

data() {

return {

count: 0

}

},

methods: {

addStep() {

this.count += 1;

}

}

}

</script>
StepComponent.vue
<template>

<div>

<div class=“from-group”>

<label for=“step-input”></label>

<input id=“step-input” v-model=“text” type=“text”>

</div>

</div>

</template>
<script>

export default {

props: {

stepNumber: {

type: Number,

required: true

}

},

data() {

return {

step: this.stepNumber,

text: “”

}

}

}

</script>

#vue-js