I want to this select drop down data from another table with vue .Here I have added directly in the coding but I want this from another Table. How can I access Value of selected option from another table?

index.html

StudentData
        <div> <label class="title"> Vorgang </label> </div>
        <div> <label class="title"> Mitarbeiter </label> </div>
        <div> <label class="title"> Dauer[min] </label></div>
        <div> <label class="title"> Stillstand[min] </label> </div>
        <div> <label class="title"> Studensatz[€/h] </label> </div>
        <div> <label class="title"> Ergebnis(€) </label> </div>

        <div class="form_group">
            <input type="text" class="form-control" id="v1" />
        </div>
        <div id="dma1" class="form_group">
            <select class="form-control" name="mitarbeiter1" id="mitarbeiter1" v-model="mitarbeiter1">
                <option :value="null" disabled selected>--Select--</option>
                <option v-for="option in mitarbeiter1_options" v-bind:value="option.id">{{option.text}}</option>
            </select>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="dauerma1" />
        </div>
        <div class="form_group">
            <label id="hr" class="form-control"> 60 </label>
        </div>
        <div class="form_group" id="ma1result">
            <label class="form-control" name="price1" id="price1" v-model="price1"
                 v-for="option in price1_options[mitarbeiter1]" v-bind:key="option.id">{{option.text}}
            </label>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="ergebnisma1" readonly />
        </div>

        <div class="form_group">
            <input type="text" class="form-control" id="v2" />
        </div>
        <div id="dma2" class="form_group">
            <select class="form-control" name="mitarbeiter2" id="mitarbeiter2" v-model="mitarbeiter2">
                <option :value="null" disabled selected>--Select--</option>
                <option v-for="option in mitarbeiter2_options" v-bind:value="option.id">{{option.text}}</option>
            </select>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="dauerma2" />
        </div>
        <div class="form_group">
            <label class="form-control" id="hr"> 60 </label>
        </div>
        <div class="form_group" id="ma2result">
            <label class="form-control" name="price2" id="price2" v-model="price2"
                 v-for="option in price2_options[mitarbeiter2]" v-bind:key="option.id">{{option.text}}
            </label>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="ergebnisma2" readonly />
        </div>

        <div class="form_group">
            <input type="text" class="form-control" id="v3">
        </div>
        <div id="dma3" class="form_group">
            <select class="form-control" name="mitarbeiter3" id="mitarbeiter3" v-model="mitarbeiter3">
                <option :value="null" disabled selected>--Select--</option>
                <option v-for="option in mitarbeiter3_options" v-bind:value="option.id">{{option.text}}</option>
            </select>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="dauerma3" />
        </div>
        <div class="form_group">
            <label class="form-control" id="hr"> 60 </label>
        </div>
        <div class="form_group" id="ma3result">
            <label class="form-control" name="price3" id="price3" v-model="price3"
                 v-for="option in price3_options[mitarbeiter3]" v-bind:key="option.id">{{option.text}}
            </label>
        </div>
        <div class="form_group">
            <input type="text" class="form-control" id="ergebnisma3" readonly />
        </div>


    </div>
</template>


<script src="vue.min.js"></script>
<script src="student.js"></script>

<style>
    .all {
        box-align: left;
        border: 1px;
        width: 200px;
        font-size: 20px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(40px, auto);
        font-family: Arial, Helvetica, sans-serif;
    }

    .title {
        padding: 5px;
        text-align: left;
        font-style: bold;
        width: 200px;
        height: 20px;
        color: brown;
        font-size: 20px;
    }
</style>

student.js

(function () {

var addStudentVue = new Vue({
el: “#app”,
data: {

  mitarbeiter1: null,
  price1: null,
  mitarbeiter1_options: [],
  price1_options: [],
  mitarbeiter2: null,
  price2: null,
  mitarbeiter2_options: [],
  price2_options: [],
  mitarbeiter3: null,
  price3: null,
  mitarbeiter3_options: [],
  price3_options: []
},
methods: {
  init: function () {
    var self = this;
    self.mitarbeiter1_options = [
      {
        text: "MA1",
        id: 1
      },
      {
        text: "MA2",
        id: 2
      },
      {
        text: "MA3",
        id: 3
      }
    ],
      self.price1_options = {
        1: [
          {
            text: "54.80€",
            id: 1
          }
        ],
        2: [
          {
            text: "44.00€",
            id: 1
          }
        ],
        3: [
          {
            text: "30.00€",
            id: 1
          }
        ],
      }
        self.mitarbeiter2_options = [
          {
            text: "MA1",
            id: 1
          },
          {
            text: "MA2",
            id: 2
          },
          {
            text: "MA3",
            id: 3
          }
        ],
          self.price2_options = {
            1: [
              {
                text: "54.80€",
                id: 1
              }
            ],
            2: [
              {
                text: "44.00€",
                id: 1
              }
            ],
            3: [
              {
                text: "30.00€",
                id: 1
              }
            ]
          }
            self.mitarbeiter3_options = [
              {
                text: "MA1",
                id: 1
              },
              {
                text: "MA2",
                id: 2
              },
              {
                text: "MA3",
                id: 3
              }
            ],
              self.price3_options = {
                1: [
                  {
                    text: "54.80€",
                    id: 1
                  }
                ],
                2: [
                  {
                    text: "44.00€",
                    id: 1
                  }
                ],
                3: [
                  {
                    text: "30.00€",
                    id: 1
                  }
                ]
              }
    


      
  }
}

});

addStudentVue.init();

})();