Add data in v-tab-item to be active based on v-tab each month

Question

I want add data in v-tab-item from api to active based on v-tab each month.
For example, start_at is January to be show on the January tab, start_at is February to be show on the February tab, etc.

<v-tabs v-model="tab" show-arrows >
  <v-tab v-for="item in tabmonth" :key="item.name" > {{ item.name }} </v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
   <v-tab-item v-for="item in tabmonth" :key="item.name">
   <v-row v-for="lesson in lessonCourse" :key="lesson.id">
      <h3 class="courseName">{{lesson.course.title}}</h3>
      <p v-if="lesson.live">{{dateFormat(lesson.live.start_at)}}</p>
      <p v-else>{{dateFormat(lesson.onsite.start_at)}}</p>
   </v-row>
   </v-tab-item>
</v-tabs-items>

<script>
 data() {
  return {
  lessonCourse: [],
  tab: null,
  tabmonth: [
    {id:0, name:'January'},
    {id:1, name:'February'},
    {id:2, name:'March'},
    ...
  ],
 }
 }
 method: {
 async getData () {
  try {
    const request = await Axios.get('v1/courses/onsite-live')
    this.lessonCourse = request.lessons
  } catch (error) {
    console.log(error.message)
  }
}}

Answer 1

You can try with computed property :