[Vuejs]-Applying a conditional statement to a Vuetify v-for loop not working correctly

You should use computed property. here is the codepen code

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    const listOfCompanies = [
  {
    "id": 352,
    "grid_id": 28,
    "header": "Company C",
    "axis_type": "category",
  },
  {
    "id": 353,
    "grid_id": 28,
    "header": "Company B",
    "axis_type": "series",
  },
  {
    "id": 354,
    "grid_id": 29,
    "header": "Company A",
    "axis_type": "series",
  }
];
    return {
      selSeries: 353,
      selCatgory:352,
      listOfCompanies
    }
  },
  computed:{
    compSeries(){
      return this.listOfCompanies.filter(item=>item.axis_type==='series')
    },
    compCategory(){
      return this.listOfCompanies.filter(item=>item.axis_type==='category')
    }
  }
})

template

<div id="app">
  <v-app id="inspire">
    <v-container
      class="px-0"
      fluid
    >
      <v-radio-group v-model="selSeries">
        <v-radio
          v-for="item in compSeries"
          :key="item.id"
          :label="item.header"
          :value="item.id"
        ></v-radio>
      </v-radio-group>
       <v-radio-group v-model="selCatgory">
        <v-radio
          v-for="item in compCategory"
          :key="item.id"
          :label="item.header"
          :value="item.id"
        ></v-radio>
      </v-radio-group>
    </v-container>
  </v-app>
</div>