列表渲染组件时，嵌套组件数据不会更新

Question

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

Answer 1

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