Не обновляется пропс компонента на Vue JS (Vue 1)

Проблема: отрабатывают консоли на страницах(Settings.vue и Home.vue) о корректном изменении статусов wifi, но не передается статус пропс в компонент WifiIcon.vue, соответственно и не отображается корректно иконка. В компонент WifiIcon.vue улетает изначально заданный статус на странице home (data() { wifiStatus: null}). проходит первое монтирование и не проходит обновление. Не могу понять, что не так. Перебрал массу способов написания и передачи пропса..

Settings.vue - страница настроек, где подключается wifi
Home.vue - домашняя страница при включении устройства
WifiIcon.vue - страница-компонент с иконками вкл\выкл wifi


``` 
    //Settings.vue
<template>
 <input name="wifi" type="radio" id="wifi_on" v-bind:value="true" v-model="wifiStatus" @click="setWifiOn"; setWifiStatus()">
 <input name="wifi" type="radio" id="wifi_off" v-bind:value="false" v-model="wifiStatus" @click="setWifiOn"; setWifiStatus()">
 </template>
 
 
 <script>
 export default {
  data () {
    return {
    wifiStatus: null,
    },
  },
  methods:{
      setWifiStatus: async function () {
      try {
        let result;
        if (this.wifiStatus) {
          result = await exec('rfkill unblock wifi');
        } else {
          result = await exec('rfkill block wifi');
        }
        if (result.stderr) {
          this.$store.state.log.error(result.stderr);
          type: 'error'
          });
        }
      } catch (err) {
        this.$store.state.log.error(err);
        type: 'error'
        });
      }
    },
    async setWifi() {
    try {
    const status = await new Promise((resolve, reject) => {
      piWifi.status('wlan0', (err, status) => {
        if (err) {
          reject(err);
        } else {
          resolve(status);
        }
      });
    });
    if (status.ssid) {
         this.connection = status.ssid;
         this.wifiStatus = true;  
    } else {
         this.wifiStatus = false;
    }
   } catch (err) {
         this.wifiStatus = false;
         this.$store.state.log.error(err);
         type: 'error'
    });
   }
   },   
   setWifiOn(){
         this.$root.$emit('wifiStatusChanged', this.wifiStatus);
         console.log('wifiStatusChanged on settings.vue ==>', this.wifiStatus)
  },
  },  
 };
```
```
//Home.vue
 <template>
      <wifi-icon :wifiStatus="wifiStatus"></wifi-icon>
</template>

<script>
import WifiIcon from '../../Pages/Home/WifiIcon.vue';

export default {
  name: 'home',
  components:{
    'wifi-icon': WifiIcon,
  },
  data () {
    return {
    wifiStatus: null,
    },
    async mounted () {
      this.$root.$on('wifiStatusChanged', await function(wifiStatus) {
    this.wifiStatusChanged(wifiStatus);
  }.bind(this));

  },
    methods: {
    wifiStatusChanged: function(wifiStatus) {
    this.wifiStatus = wifiStatus;
    console.log('wifiStatusChanged on Home.vue ==>', wifiStatus);
  },
  },
```
```
 // WifiIcon.vue
  <template>
  <div>
    <div v-if="wifiStatus">
      <img src="../../../assets/images/wifi.png" alt="Wi-Fi подключен" style="width: 25px;">
    </div>
    <div v-if="!wifiStatus">
      <img src="../../../assets/images/wifi_line.png" alt="Нет подключения Wi-Fi" style="width: 25px;">
    </div>
  </div>
</template>

<script>
export default {
  name: 'WifiIcon',
  props: {
    wifiStatus: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    console.log('props in WiFiIcon.vue ==>', this.wifiStatus);
  },
};
</script>
```

Ответы (0 шт):