需要帮助。我对Vue.js相当陌生，需要一些帮助和建议。
背景：
我有一个内部带有BS模式的组件，它在for循环中呈现，显然有很多示例。
发布日期：
The very first rendered component has its data received from parent via props, and the rest component have their own (like row.id and etc.)
问题：怎么解决？可能是BS模式的问题？
组成部分：

let vSelect = Vue.component("v-select", VueSelect.VueSelect);

    var scoringButton = Vue.component("scoring-button", {
      props: ["loadId", "causeData"],
      template: "#scoring-template",
      components: {
        "v-select": vSelect,
      },
      data: function () {
        return {
          scoredLoadId: this.loadId,
          scoring: null,
          causeId: null,
          selectedCause: null,
          causeList: this.causeData,
        };
      },
      computed: {
        showCauseList() {
          if (this.scoring === "1" || this.scoring === null) {
            return true;
          }
          return false;
        },
      },
    });

模板：

<template v-cloak id="scoring-template">
      <div class="scoring-block" :id="scoredLoadId">
        <div class="scoring">
          <button
            v-if="scoring === '1'"
            title="Scoring button"
            type="button"
            class="btn btn-success scoring-btn"
            data-bs-toggle="modal"
            data-bs-target="#scoringModal"
          >
            <i class="bi bi-hand-thumbs-up-fill"></i>
          </button>
          <button
            v-else-if="scoring === '2'"
            title="Scoring button"
            type="button"
            class="btn btn-danger scoring-btn"
            data-bs-toggle="modal"
            data-bs-target="#scoringModal"
          >
            <i class="bi bi-hand-thumbs-down-fill"></i>
          </button>
          <button
            v-else
            title="Scoring button"
            type="button"
            class="btn btn-info scoring-btn"
            data-bs-toggle="modal"
            data-bs-target="#scoringModal"
          >
            <i class="bi bi-hand-thumbs-up-fill"></i>
            <i class="bi bi-hand-thumbs-down-fill"></i>
          </button>
        </div>
        <div
          class="modal fade scoring-modal"
          id="scoringModal"
          tabindex="-1"
          role="dialog"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" :key="loadId">
              <div class="modal-header">
                <h1 class="modal-title">Load Scoring</h1>
                <button
                  type="button"
                  class="btn-close"
                  aria-label="Close"
                  data-bs-dismiss="modal"
                ></button>
              </div>

              <div class="modal-body">
                <div class="scoring-content">
                  <input
                    type="radio"
                    class="btn-check"
                    name="btnScore"
                    id="btnLike"
                    autocomplete="off"
                    checked="scoring === '1'"
                    value="1"
                    v-model="scoring"
                  />
                  <label
                    class="btn btn-outline-success"
                    for="btnLike"
                    @click="clearSelectedCause"
                  >
                    <i class="bi bi-hand-thumbs-up-fill"></i> Like
                  </label>
                  <input
                    type="radio"
                    class="btn-check"
                    name="btnScore"
                    id="btnDislike"
                    autocomplete="off"
                    :checked="scoring === '2'"
                    value="2"
                    v-model="scoring"
                  />
                  <label class="btn btn-outline-danger" for="btnDislike">
                    <i class="bi bi-hand-thumbs-down-fill"></i> Dislike
                  </label>
                </div>
                <div class="scoring-cause">
                  <v-select
                    :disabled="showCauseList"
                    label="name"
                    :options="causeList"
                    v-model="selectedCause"
                    placeholder="Choose a cause option"
                  ></v-select>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" class="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

母公司：

var mainTableApp = new Vue({
        el: "#main-table",
        data: {
            tableData: [],
            scoringCauseList: [
                 {
                   "id": 6,
                   "scoring_type": 0,
                   "name": "Late at loading",
                   "mark": "late_at_loading"
                 },
                 {
                   "id": 7,
                   "scoring_type": 0,
                   "name": "Special conditions were not respected",
                   "mark": "special_conditions_were_not_respected"
                 },
                 {
                   "id": 8,
                   "scoring_type": 0,
                    "name": "Bad/not enough information",
                   "mark": "bad_not_enough_information"
                  }
              ],
        },
        components:{
            'scoring-button': scoringButton,
        }
    });

主应用程序块中的组件：

<div 
   v-for="row in tableData"
   class="row-container"
   >
   ....
   <scoring-button 
      :id="row.LOAD_ID"
      :key="row.LOAD_ID"
      :load-id="row.LOAD_ID" 
      :cause-data="scoringCauseList"
   >
   </scoring-button>
   ....
</div>

我试着重新设置BS modal的数据，但是没有成功。所以，我回去在Vue部分寻找解决方案。
我知道我可能构造整个事情不够在一个非常正确的方式，但下面的代码是最后一个版本后，许多其他的解决方案，已尝试与v模型，$emit， prop 等。