How to automatically fill span text based on subject_id

I have this database table called subjects

Subjects Table

• id
• subject_code
• subject_description

view

<section class="content" id="evaluate" style="background-color:#fff; padding-bottom:50px;" v-cloak>
  <form action="{{  url('/test') }}" @submit.prevent="saveRows" method="post">
   <div class="subjects-content">
     <h3 class="subjects-trimester-title">Self Evaluation Page</h3>

     <div class="self-evaluation-rows">
      Number of Rows: &nbsp; 
      <input v-model="number" type="text" name="rows" class="rows-textbox">
      <div class="btn btn-blueviolet btn-inline-block btn-create" @click="addRow" v-show="rows.length < 10" >Add Row</div>
      @for ($i = 0; $i < 178; $i++) 
      &nbsp
      @endfor <div class="btn btn-blueviolet btn-inline-block btn-create">View Update</div>
    </div>
  </div>
  <div class="box-body box-self-evaluation">
    <table id="example2" class="table table-hover table-striped sortable">
      <thead>
        <tr>
          <th>Subject Area</th>
          <th>Section</th>
          <th>Grade</th>
          <th>Course Title</th>
          <th>Remove</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="row in rows" v-if="rows">
          <td>
            <select v-model="row.subject" id="subject" name="subject">
              <option></option><br>
              @foreach($subject_data as $data)
              <option value="{{ $data->id }}">{{ $data->subject_code }}</option>
              @endforeach
            </select>
          </td>
          <td>
            <select v-model="row.section" id="section" name="section">
              <option></option><br>
              <option value="IP">IP</option>
              <option value="IQ">IQ</option>
            </select>
          </td>
          <td>
            <select v-model="row.grade" id="grade" name="grade">
              <option></option><br>
              <option value="A+">A+</option>
              <option value="A">A</option>
            </select>
          </td>
          <td><span> @{{ description }} </span></td>
          <td><button type="button" @click="removeRow(row)" class="fa fa-remove delete-button"></button></td>
        </tr>       
        <tr v-if="rows.length == 0">
          <td>  Please add a row for your subjects
          </td>
        </tr>
      </tbody>
    </table>        
  </div>
  <div class="confirmation-buttons-self-evaluation">
    &nbsp; &nbsp; &nbsp; <button class="btn btn-blueviolet btn-inline-block btn-create" >Save</button>
    <input type="hidden" value="{{ Session::token() }}" name="_token">

  </div>          
</form>


</section>

script

 var total = 0;
  var evaluate  = new Vue({
   http: {
    root: '',
    headers: {
      'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('value')
    }
  },

  el: "#evaluate",
  data: {
    rows: [ 
    ],
    maxRows: 10,
    success: false,
    subjects: []
  },
  methods:{
    addRow: function(){
      this.number = parseInt(this.number); // FUCK LOGIC
      if(total + this.number <= 10)
      {
        total += this.number;
        for(var i=0; i < this.number; i++){
          this.rows.push({ subject: '', section: '', grade: ''});
        }
      }
    },
    removeRow: function(row){
      this.rows.$remove(row);
    },
    saveRows: function () {
      // USER INPUT
      var grade = JSON.stringify(this.rows);

      // PASS DATA TO THE FUNCTION
      this.$http.post('eCampus/test', grade)

      // ALERT
      if(this.rows.length == 0) {
       swal({
         title: "Oops.,",
         text: "Please add rows first!",
         type: "error",
       });
     }
     else {
       swal({
         title: "Congrats!",
         text: "Your grade has been updated!",
         type: "success",
       });
     }
     

     for(var x=0; x <= 10; x++){
      this.rows.pop({});
    }
  }
},
computed: {
  description: function() {
  this.$http.get('eCampus/api/subjects', function (subjects) {
    this.subjects = subjects;
  }.bind(this));
  
   var desc = JSON.stringify(this.rows);
   console.log(desc)
   desc.foreach(function(test){
    console.log(test);
   });

 }
}

});

how do I make this work?