[Vuejs]-Switch multiple case and multiple return in Vue/Javascript

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isHide: true,
      /*icons: {
        mdiBellOutline,
        mdiBellCheckOutline,
      },*/
      students: [
        { no: '1', name: 'Ridho Mckinnon', status: 1, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 1, isRemind: 1,},
        { no: '2', name: 'Ridho Mckinnon', status: 1, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 1,},
        { no: '3', name: 'Ridho Mckinnon', status: 0, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 1,},
        { no: '4', name: 'Ridho Mckinnon', status: 0, time: ' 08:04 - 09:58, 19/01/2021', isCorrect: 0, isRemind: 0,},
      ],
      // 👇 new data property with mappings
      options: [
        {type: [1,1,1], color: 'v-btn--outlined theme--light primary--text', txt: 'Corrected', icon: 'd-none'},
        {type: [1,0,1], color: 'primary plain--text', txt: 'Correction', icon: 'd-none'},
        {type: [0,0,1], color: 'v-btn v-btn--text theme--light success--text shadow-none', txt: 'Reminded', icon: ''},
        {type: [0,0,0], color: 'v-btn v-btn--text theme--light primary--text shadow-none', txt: 'Remind', icon: ''}
      ]
    }
  },
  computed: {
    // 👇 computed property for adjusting your array
    getStudents() {
      const result = []
      this.students.forEach(s => {
        this.options.forEach(o => {
          if ([s.status, s.isCorrect, s.isRemind] == ''+o.type) {
            s.color = o.color
            s.txt = o.txt
            s.icon = o.icon
            result.push(s)
          }
        })
      })
      return result
    }
  },
  methods: {
    getColorChip(status) {
      return status === 1 ? 'v-chip-light-bg success--text' : 'v-chip-light-bg error--text'
    },
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
                               <!-- 👇 loop with computed property -->
        <v-row v-for="student in getStudents" :key="student.no">
          <v-col xl="2" lg="2" md="2" sm="6" cols="12">
            <v-chip
            class="text-subtitle-2 text-md-caption text-lg-caption text-xl-caption"
            :color="getColorChip(student.status)"
            >
              {{ `${student.status ? 'Active': 'Nonactive'} ` }}
            </v-chip>
          </v-col>
          <v-col xl="3" lg="3" md="3" sm="6" cols="12">
            <div class="d-flex align-center">
              <div>
                <v-img src="../../../../assets/icons/calendar.svg" width="20"></v-img>
              </div>
              <span class="pl-2 text-subtitle-2">{{ student.time }}</span>
            </div>
          </v-col>
          <v-col xl="3" lg="3" md="3" sm="12" cols="12">
            <v-btn width="100%" :color="student.color">
              <v-icon v-show="isHide" class="mr-2" :class="student.icon">
                {{ student.icon }}
              </v-icon>
              {{ student.txt }}
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>