Estoy trabajando en botones de radio con vuetify. Tengo dos botones de radio, necesito ocultar uno cuando el otro está marcado y mostrar ambos cuando hago clic en el botón alternar Cambiar opción. La siguiente es una ilustración de mi código.

¿Qué necesito cambiar en mi código:

 <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>

mi guion

 <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>

el css

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