The list rendering on the parent component runs perfectly
<stock-card
class="col-sm"
v-for="(stock, index) in formattedStocks"
:stock="stock"
:key="index"
>
</stock-card>
On the nested component it only renders the first instance of the loop inside the modal component
<p class="card-text text-success">{{ stock["name"] }}$</p>
<button
class="btn btn-danger rounded-pill"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
@click="buyStock(stock)"
>
Activate Modal
</button>
<modal :modalTitle="stock['name']" />
I do have props on the both components
The problem is with the way modal was used.
Generally, bootstrap modal is opened using data-bs-toggle="modal" and data-bs-target="modalInfo" attributes. data-bs-target is connected with id="modalInfo" in order to open and close the model.
In your case, for all three has the same data-bs-target and id, hence it was showing the same first modal in all the cases.
Here is the working example: Codesandbox