Javascript Vue js表格相关下拉列表为每行选择（每行的国家和地区）

我有下面的简单表格， 我需要使用vuex为每行中的每个国家/地区发送http请求， 区域数组应在每个国家/地区更改，每行更改， 但是监视代码没有完成 vuex存储中的所有请求， 我需要正确的方法来观察每一行中的国家值 表格编号： //html代码

           <template>
                  <v-container fluid>
                    <v-simple-table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>"country"</th>
                          <th>"area"</th>
                
                          <th>
                            <v-btn class="my-2 ml-4" small icon @click="addRow">
                              <v-icon>mdi-plus-circle-outline</v-icon>
                            </v-btn>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(address, i) in mainFields" :key="i">
                          <td>{{ i + 1 }}</td>
                          <td>
                            <v-select
                              :items="countries"
                              v-model="address.country"
                              item-text="label"
                              item-value="value"
                              class="mt-2"
                              dense
                              outlined
                              color="primary"
                              background-color="inputBack"
                            ></v-select>
                          </td>
                          <td>
                            <v-select
                              :items="areas"
                              v-model="address.area"
                              item-text="label"
                              item-value="value"
                              class="mt-2"
                              dense
                              outlined
                              color="primary"
                              background-color="inputBack"
                            ></v-select>
                          </td>
                
                          <td>
                            <v-btn class="my-2 ml-4" small icon @click="removeRow">
                              <v-icon>
                                mdi-delete
                              </v-icon>
                            </v-btn>
                          </td>
                        </tr>
                      </tbody>
                    </v-simple-table>
                  </v-container>
                </template>
   //js code             
                <script>
                import { mapFields } from "vuex-map-fields";
                
                export default {
                  data() {
                    return {
                      mainFields: [
                        {
                          id: 0,
                          country: "",
                          area: "",
                          fields: []
                        }
                      ]
                    };
                  },
                
                  methods: {
                    loadInitial() {
                      this.$store.dispatch(`communicationMethods/loadCountries`);
                    },
                    loadArea(id) {
                      //get all areas by countryId
                      this.$store.dispatch(`communicationMethods/loadAreas`, id);
                    },
                    getId(arr) {
                      let id = 0;
                      arr.forEach(element => {
                        if (element.id > id) id = element.id;
                      });
                      return id + 1;
                    },
                    addRow() {
                      this.mainFields.push({
                        id: this.getId(this.mainFields),
                        country: "",
                        division: "",
                        fields: []
                      });
                    },
                    removeRow(index) {
                      if (index > -1) this.mainFields.splice(index, 1);
                      else return;
                    },
                
                    getNewItemIndex(arr1, arr2) {
                      for (let i = 0; i < arr1.length; i++) {
                        if (arr1[i].country !== arr2[i].country) return i;
                      }
                    }
                  },
                
                  computed: {
                    ...mapFields("communicationMethods", ["id"]),
                    ...mapFields("communicationMethods", ["countries"]),
                    ...mapFields("communicationMethods", ["areas"])
                  },
                  watch: {
                    mainFields: {
                      handler(newVal, oldVal) {
                        //  if (newVal.length !== oldVal.length) return;
                        console.log(oldVal);
                
                        console.log(newVal);
                
                        //get item index
                        // let index = this.getNewItemIndex(newVal, oldVal);
                        // console.log(index);
                
                        // console.log(this.mainFields[index]);
                        //  this.loadArea(this.mainFields[index].country);
                      },
                      deep: true
                      // immediate: true
                    }
                  },
                  created() {
    //load countries
                    this.loadInitial();
                  }
                };
                </script>