selecting radios on an expansion panel changes properties in another component vuetify

I have a component with expansion panels and radio buttons. and another component with bunch of pictures. My goal is to either show or not show the pictures based on what radio button is selected.

I have written a code but it doesn't work:

This is the component with radio buttons(IFModule.vue):

<template>
 .
 . 
  <app-ifpics></app-ifpics>
  <v-expansion-panel
  >
    <v-expansion-panel-content class="elevation-0"
                               v-for="(item,i) in stuff"
                               :key="i"
                               :label="item.label"
    >
      <div slot="header">
        <v-radio-group height="0" row
                       :mandatory="false" v-model="item.subsYes"
                       @click.stop="showPicture(i, value)">


          <v-radio label="Yes" value="Yes" ></v-radio>
          <v-radio label="No"  value="No"></v-radio>
        </v-radio-group>
      </div>

      <v-card>
        <v-card-text></v-card-text>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
 .
 .
</template>

<script>
  import IFPics from "./IFPic";
  import { ifBus } from "../../../main";

  export default {
    data(){
      return{
        stuff: [
          {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input3', subsNo: 'input3No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input2', subsNo: 'input2No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board.', subsYes: 'input1', subsNo: 'input1No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output7', subsNo: 'output7No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output6', subsNo: 'output6No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output5', subsNo: 'output5No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output4', subsNo: 'output4No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output3', subsNo: 'output3No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output2', subsNo: 'output2No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'output1', subsNo: 'output1No'},
      {label: 'Do you want this board', detail: 'Details: This is a very good board', subsYes: 'power', subsNo: 'powerNo'}
        ]
      }
    },
   methods:{
      showPicture(index){
        const hasan = this.stuff[index].subsYes;
        const asghar = this.stuff[index].subsNo;
        ifBus.$emit('value', hasan);
        ifBus.$emit('item', asghar);
      }
    },
    components:{
      appIfpics: IFPics
   }
  }
</script>

And here is my component with pictures(IFPic.vue):

<template>
  <div>
      .
      .
      <v-layout column>
        <div id="pic">
          <img src="../../../assets/Subrackpics/IF/EmptySub.png" height="236" width="500"/>
        </div>
        <img v-if="shoPower" src="../../../assets/Subrackpics/IF/power.png" height="232"  width="71" id="power" >
        <img v-if="showOutput1 " src="../../../assets/Subrackpics/IF/output1.png" height="233" width="46" id="output1">
        <img v-if="showOutput2" src="../../../assets/Subrackpics/IF/output2.png" height="233" width="47" id="output2">
        <img v-if="showOutput3"  src="../../../assets/Subrackpics/IF/output3.png" height="233" width="48" id="output3">
        <img v-if="showOutput4" src="../../../assets/Subrackpics/IF/output4.png" height="233" width="46" id="output4">
        <img v-if="showOutput5" src="../../../assets/Subrackpics/IF/output5.png" height="233" width="47" id="output5">
        <img v-if="showOutput6" src="../../../assets/Subrackpics/IF/output6.png" height="233" width="47" id="output6">
        <img v-if="showOutput7" src="../../../assets/Subrackpics/IF/output7.png" height="233" width="47" id="output7">
        <img v-if="showInput1" src="../../../assets/Subrackpics/IF/input1.png" height="233" width="37" id="input1">
        <img v-if="showInput2"  src="../../../assets/Subrackpics/IF/input2.png" height="233" width="37" id="input2">
        <img v-if="showInput3"  src="../../../assets/Subrackpics/IF/input3.png" height="233" width="37" id="input3">
      . 
      .
</template>

<script>
  import { ifBus } from "../../../main";

  export default {
    data() {
      return {
        item:'',
        value:'',
        shoPower:'',
        showOutput7:'',
        showOutput6:'',
        showOutput5:'',
        showOutput4:'',
        showOutput3:'',
        showOutput2:'',
        showOutput1:'',
        showInput3:'',
        showInput2:'',
        showInput1:'',
      }
    },
 created() {
  ifBus.$on('value', hasan => {
    this.value = hasan
  });
  ifBus.$on('item', asghar => {
    this.item = asghar
  });

  if (this.item === 'powerNo' && this.value === 'Yes') {
    this.shoPower = true;
  }
  else if (this.item === 'powerNo' && this.value === 'No') {
    this.shoPower = false;
  }

  if (this.item === 'output1No' && this.value === 'Yes') {
    this.showOutput1 = true;
  }
  else if (this.item === 'output1No' && this.value === 'No') {
    this.showOutput1 = false;
  }

  if (this.item === 'output2No' && this.value === 'Yes') {
    this.showOutput2 = true;
  }
  else if (this.item === 'output2No' && this.value === 'No') {
    this.showOutput2 = false;
  }

  if (this.item === 'output3No' && this.value === 'Yes') {
    this.showOutput3 = true;
  }
  else if (this.item === 'output3No' && this.value === 'No') {
    this.showOutput3 = false;
  }

  if (this.item === 'output4No' && this.value === 'Yes') {
    this.showOutput4 = true;
  }
  else if (this.item === 'output4No' && this.value === 'No') {
    this.showOutput4 = false;
  }

  if (this.item === 'output5No' && this.value === 'Yes') {
    this.showOutput5 = true;
  }
  else if (this.item === 'output5No' && this.value === 'No') {
    this.showOutput5 = false;
  }

  if (this.item === 'output6No' && this.value === 'Yes') {
    this.showOutput6 = true;
  }
  else if (this.item === 'output6No' && this.value === 'No') {
    this.showOutput6 = false;
  }

  if (this.item === 'output7No' && this.value === 'Yes') {
    this.showOutput7 = true;
  }
  else if (this.item === 'output7No' && this.value === 'No') {
    this.showOutput7 = false;
  }

  if (this.item === 'input1No' && this.value === 'Yes') {
    this.showInput1 = true;
  }
  else if (this.item === 'input1No' && this.value === 'No') {
    this.showInput1 = false;
  }

  if (this.item === 'input2No' && this.value === 'Yes') {
    this.showInput2 = true;
  }
  else if (this.item === 'input2No' && this.value === 'No') {
    this.showInput2 = false;
  }

  if (this.item === 'input3No' && this.value === 'Yes') {
    this.showInput3 = true;
  }
  else if (this.item === 'input3No' && this.value === 'No') {
    this.showInput3 = false;
  }
}

So again for example I want to select yes on the first group of radiobuttons and by doing so one of the pictures show and if I click no the picture disappears and so on.

What's the best way to do it?