Vue. js - V-модель не работает при выборе опции

Question

у меня следующая проблема. Я хочу реализовать crud - приложение в vuejs. Но у меня проблемы с отображением старого значения, а затем внести изменения и сохранить его. SelectD не отображается, и я не знаю, почему.

<template>
  <div class="row">
    <label class="control-label">A:</label>
    <b-form-select
      class="form-control"
      v-model="selectedA"
    >
      <b-form-select-option
        v-for="a in listOfA"
        v-bind:key="a.id"
        :value="a"
      >
        {{a.id}}
      </b-form-select-option>
    </b-form-select>
  </div>
  </div>
  <div class="row">
    <div class="col-md-4 pr-md-1 text-left">
      <label class="control-label">B:</label>
      <b-form-select
        class="form-control"
        v-model="selectedB"
      >
        <b-form-select-option
          v-for="bin listOfB"
          v-bind:key="b.id"
          :value="b"
        >
          {{b.id}}
        </b-form-select-option>
      </b-form-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 pr-md-1 text-left">
      <label class="control-label">C:</label>
      <b-form-select
        class="form-control"
        v-on:change="onChange"
        v-
        model="selectedC"
      >
        <b-form-select-option
          v-for="cin listOfC"
          v-bind:key="c.id"
          :value="c.id"
        >
          {{c.id}}
        </b-form-select-option>
      </b-form-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 pr-md-1 text-left">
      <label class="control-label">D:</label>
      <b-form-select
        class="form-control"
        v-model="selectedD"
      >
        <b-form-select-option
          v-for="din listOfD"
          v-bind:key="d.id"
          :value="d"
        >
          {{d.id}}
        </b-form-select-option>
      </b-form-select>
    </div>
  </div>
  <base-button
    type="submit"
    class="customUpdateButton"
    @click="update()"
  >Save
  </base-button>
  </form>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                selectedA: '',
                selectedB: '',
                selectedC: '',
                selectedD: '',

                listOfA: [],
                listOfB: [],
                listOfC: [],
                listOfD: [],

            }
        },
        components: {
            Card,
            BaseInput,
            BaseButton
        },
        mounted() {
            this.id = this.$route.params.id;
            this.getObj(this.id);
            this.getA();
            this.getB();
            this.getC();
        },
        methods: {
            getObj(id) {
                axios.get('http://localhost:8000/abc/abc/obj/' + id).then(response => {
                    this.selectedA= response.data.a;
                    this.selectedB= response.data.b;
                    this.selectedC= response.data.c;
                    this.selectedD= response.data.d;
                })
            },
            onChange: function () {
                this.getD()
            },
            getA() {
                axios.get('http://localhost:8000/abc/abc/abcd/a').then(response => {
                    this.listOfA = response.data;
                })
            },
            getB() {
                axios.get('http://localhost:8000/abc/abc/abcd/b').then(response => {
                    this.listOfB = response.data;
                })
            },
            getC() {
                axios.get('http://localhost:8000/abc/abc/abcd/c').then(response => {
                    this.listOfC = response.data;
                })
            },
            getD() {
                axios.get('http://localhost:8000/abc/abc/abcd/d/' + this.selectedC).then(response => {
                    this.listOfD = response.data;
                })
            }
            update() {
                axios.put('http://localhost:8000/abc/abc/obj/' + this.id, {
                    a: this.selectedA,
                    b: this.selectedB,
                    c: this.selectedC,
                    d: this.selectedD
                }).then(_ => {
                    this.$router.push('/overview')
                })
            }

        }
    }
</script>

Моя цель заключается в следующем: три значения в опциях выбора отображаются при открытии страницы обновления. Но я не знаю, как добиться того, чтобы показывалось и мое значение selectedD. Это вызывает у меня проблемы, потому что это зависит от функции getD (), это означает, что она должна установить выбранную переменную C, чтобы показать мне мое значение selectedD.

Надеюсь, вы все можете мне помочь Спасибо