Vuetify radio button show/hide section

I am working on radio buttons with vuetify. I have two radio buttons, I need to hide one when the other is checked and show both when I click on toggleChangeOption button. The below is an illustration of my code.

What do I need to change in my code:

<v-radio-group v-model="options">
<div v-show="isFocus" :class="{focus: isFocus, 'display-options': showAll}">
  <v-radio 
  label="radio 1" 
  value="radio 1"
  @click="showOne"
  ></v-radio>
  <v-btn v-show="isActive" :class="{active: isActive}" @click="toggleChangeOption">
    Change
  </v-btn>
</div>
<div v-show="isFocus" :class="{focus: isFocus, 'display-options': showAll}">
  <v-radio label="radio 2" value="radio 2" @click="showTwo"></v-radio>
  <v-btn v-show="isActive" :class="{active: isActive}" @click="toggleChangeOption">
    Change
  </v-btn>
</div>
</v-radio-group>

My script

<script>
export default {
 data () {
    return {
     options: null,
     isActive: false,
     isFocus: false,
     showAll: false,
     showOne: true
     showTwo: true
    }
  },
  methods: {
   showOne(){
      this.isFocus = false
      this.isActive = true
      this.showTwo = false
   },
   showTwo(){
      this.showOne = false
      this.showAll = true
    },
    toggleChangeOption(){
      this.showOne = true
      this.showTwo = true
      this.showAll = false
    }
  }
};
</script>

The css

<style>
.active {
  display: block;
}

.display-options {
  display: none;
}
</style>