From 6277ffa607ee3963421137176c9f8e4dc74b5f5d Mon Sep 17 00:00:00 2001
From: Miguel Angel Mulero Martinez <migmul@gmail.com>
Date: Tue, 18 Feb 2025 17:09:30 +0100
Subject: [PATCH] Fix as many Vue3 issues as possible

The biggest problem is with arrays. Vue3 is not detecting well
reactivity in some arrays because we have the view and the logic in
different files, so we can't access the reactivity proxy in a clean way.

I've added reactivity in the definition of the modules affected as a
workaround, but I'm sure there must be a better way.
---
 package.json                                  |   2 +-
 src/components/init.js                        |  49 ++---
 .../port-picker/FirmwareVirtualOption.vue     |  50 ++++--
 .../port-picker/PortOverrideOption.vue        |  56 +++---
 src/components/port-picker/PortPicker.vue     |  43 ++---
 src/components/port-picker/PortsInput.vue     | 169 ++++++------------
 src/components/quad-status/BatteryIcon.vue    | 154 +++++++---------
 src/components/quad-status/BatteryLegend.vue  |  36 ++--
 src/components/status-bar/PortUtilization.vue |  44 ++---
 src/components/status-bar/StatusBar.vue       |   2 +-
 src/js/fc.js                                  |   3 +-
 src/js/port_handler.js                        |  18 +-
 yarn.lock                                     |   2 +-
 13 files changed, 284 insertions(+), 344 deletions(-)

diff --git a/package.json b/package.json
index 396afa2ea5..52acc96f19 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "three": "~0.97.0",
     "tiny-emitter": "^2.1.0",
     "vite-plugin-pwa": "^0.17.5",
-    "vue": "^3.5.12"
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
diff --git a/src/components/init.js b/src/components/init.js
index 062ec8841d..19ae8ead14 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -2,10 +2,10 @@
 // `i18n` helper to window and setting up `i18next`
 // in the future it should be pure. This means it should
 // explicitly export things used by other parts of the app.
-import '../js/localization.js';
-import '../js/injected_methods';
-import i18next from 'i18next';
-import { createApp } from "vue";
+import "../js/localization.js";
+import "../js/injected_methods";
+import i18next from "i18next";
+import { createApp, reactive } from "vue";
 import I18NextVue from "i18next-vue";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
@@ -18,35 +18,42 @@ import PortUsage from "../js/port_usage.js";
 import PortPicker from "./port-picker/PortPicker.vue";
 import CONFIGURATOR from "../js/data_storage.js";
 
-// Most of the global objects can go here at first.
-// It's a bit of overkill for simple components,
-// but these instance would eventually have more children
-// which would find the use for those extra properties.
-const betaflightModel = {
+/*
+ Most of the global objects can go here at first.
+ It's a bit of overkill for simple components,
+ but these instance would eventually have more children
+ which would find the use for those extra properties.
+
+ FIXME For some reason, some of them (like PortHandler and FC) 
+ need to be marked as reactive in it's own module, to detect
+ changes in arrays so I added the `reactive` wrapper there too.
+*/
+const betaflightModel = reactive({
     CONFIGURATOR,
     FC,
     MSP,
     PortUsage,
     PortHandler,
-};
+});
 
-i18next.on('initialized', function() {
+i18next.on("initialized", function () {
     console.log("i18n initialized, starting Vue framework");
 
     const app = createApp({
-        data() { return betaflightModel; },
+        setup() {
+            return betaflightModel;
+        },
     });
 
-    app
-    .use(I18NextVue, { i18next })
-    .component('BetaflightLogo', BetaflightLogo)
-    .component('BatteryLegend', BatteryLegend)
-    .component('StatusBar', StatusBar)
-    .component('BatteryIcon', BatteryIcon)
-    .component('PortPicker', PortPicker)
-    .mount('#main-wrapper');
+    app.use(I18NextVue, { i18next })
+        .component("BetaflightLogo", BetaflightLogo)
+        .component("BatteryLegend", BatteryLegend)
+        .component("StatusBar", StatusBar)
+        .component("BatteryIcon", BatteryIcon)
+        .component("PortPicker", PortPicker)
+        .mount("#main-wrapper");
 
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
         console.log("Development mode enabled, installing Vue tools");
         // TODO Vue.config.devtools = true;
         app.config.performance = true;
diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index 462a7e2e15..22c9793566 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -1,7 +1,13 @@
 <template>
     <div id="firmware-virtual-option" :style="{ display: isVirtual ? 'block' : 'none' }">
         <div class="dropdown dropdown-dark">
-            <select id="firmware-version-dropdown" class="dropdown-select" :title="$t('virtualMSPVersion')">
+            <select
+                id="firmware-version-dropdown"
+                :value="modelValue"
+                class="dropdown-select"
+                :title="$t('virtualMSPVersion')"
+                @input="updateValue($event.target.value)"
+            >
                 <option v-for="(version, index) in firmwareVersions" :key="index" :value="version.value">
                     {{ version.label }}
                 </option>
@@ -11,24 +17,36 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from "vue";
 
 export default defineComponent({
-  props: {
-    isVirtual: {
-      type: Boolean,
-      default: true,
+    props: {
+        modelValue: {
+            type: String,
+            default: "1.47.0",
+        },
+        isVirtual: {
+            type: Boolean,
+            default: true,
+        },
     },
-    data() {
-      return {
-        firmwareVersions: [
-          { value: "1.47.0", label: "MSP: 1.47 | Firmware: 4.6.*" },
-          { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
-          { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
-          { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
-        ],
-      };
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+        const updateValue = (value) => {
+            emit("update:modelValue", value);
+        };
+
+        const firmwareVersions = ref([
+            { value: "1.47.0", label: "MSP: 1.47 | Firmware: 4.6.*" },
+            { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
+            { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
+            { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
+        ]);
+
+        return {
+            firmwareVersions,
+            updateValue,
+        };
     },
-  },
 });
 </script>
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index ce7974deee..9559e14bee 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -1,44 +1,38 @@
 <template>
-  <div
-    v-if="isManual"
-    id="port-override-option"
-  >
-    <label
-      for="port-override"
-    ><span>{{ $t("portOverrideText") }}</span>
-      <input
-        id="port-override"
-        type="text"
-        :value="value"
-        @change="inputValueChanged($event)"
-      >
-    </label>
-  </div>
+    <div v-if="isManual" id="port-override-option">
+        <label for="port-override">
+            <span>{{ $t("portOverrideText") }}</span>
+            <input id="port-override" type="text" :value="modelValue" @input="inputValueChanged($event.target.value)" />
+        </label>
+    </div>
 </template>
 
 <script>
+import { defineComponent } from "vue";
 import { set as setConfig } from "../../js/ConfigStorage";
-import { defineComponent } from 'vue';
 
 export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: '/dev/rfcomm0',
-    },
-    methods: {
-        inputValueChanged(event) {
-            setConfig({ portOverride: event.target.value });
-            this.$emit("input", event.target.value);
+    props: {
+        modelValue: {
+            type: String,
+            default: "/dev/rfcomm0",
+        },
+        isManual: {
+            type: Boolean,
+            default: true,
         },
     },
-  },
-  methods: {
-    inputValueChanged(event) {
-      setConfig({'portOverride': event.target.value});
-      this.$emit('input', event.target.value);
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+        const inputValueChanged = (newValue) => {
+            setConfig({ portOverride: newValue });
+            emit("update:modelValue", newValue);
+        };
+
+        return {
+            inputValueChanged,
+        };
     },
-  },
 });
 </script>
 
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index f973d5cd67..0bc32eeddf 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -3,28 +3,28 @@
         <PortOverrideOption
             v-if="modelValue.selectedPort === 'manual'"
             :model-value="modelValue.portOverride"
-            @update:modelValue="updateValue('portOverride', $event)"
+            @update:modelValue="updateModelValue('portOverride', $event)"
         />
         <FirmwareVirtualOption
             v-if="modelValue.selectedPort === 'virtual' && !isConnected"
             :model-value="modelValue.virtualMspVersion"
-            @update:modelValue="updateValue('virtualMspVersion', $event)"
+            @update:modelValue="updateModelValue('virtualMspVersion', $event)"
         />
         <PortsInput
-            :model-value="modelValue.selectedPort"
+            :model-value="modelValue"
             :connected-bluetooth-devices="connectedBluetoothDevices"
             :connected-serial-devices="connectedSerialDevices"
             :connected-usb-devices="connectedUsbDevices"
             :disabled="disabled"
             :show-virtual-option="showVirtualOption"
             :show-manual-option="showManualOption"
-            @update:modelValue="updateValue(null, $event)"
+            @update:modelValue="updateModelValue(null, $event)"
         />
     </div>
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import PortOverrideOption from "./PortOverrideOption.vue";
 import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
@@ -40,13 +40,7 @@ export default defineComponent({
     props: {
         modelValue: {
             type: Object,
-            default: () => ({
-                selectedPort: "noselection",
-                selectedBaud: 115200,
-                portOverride: "/dev/rfcomm0",
-                virtualMspVersion: "1.46.0",
-                autoConnect: true,
-            }),
+            required: true,
         },
         connectedBluetoothDevices: {
             type: Array,
@@ -54,7 +48,7 @@ export default defineComponent({
         },
         connectedSerialDevices: {
             type: Array,
-            default: () => [],
+            required: true,
         },
         connectedUsbDevices: {
             type: Array,
@@ -76,20 +70,21 @@ export default defineComponent({
 
     emits: ["update:modelValue"],
 
-    computed: {
-        isConnected() {
-            return CONFIGURATOR.connectionValid;
-        },
-    },
+    setup(props, { emit }) {
+        const isConnected = computed(() => CONFIGURATOR.connectionValid);
 
-    methods: {
-        updateValue(key, value) {
-            if (key != null) {
-                this.$emit("update:modelValue", { ...this.modelValue, [key]: value });
+        const updateModelValue = (key, value) => {
+            if (key) {
+                emit("update:modelValue", { ...props.modelValue, [key]: value });
             } else {
-                this.$emit("update:modelValue", { ...this.modelValue, ...value });
+                emit("update:modelValue", value); // Para el caso de PortsInput
             }
-        },
+        };
+
+        return {
+            isConnected,
+            updateModelValue,
+        };
     },
 });
 </script>
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index d671449b82..bfd9409d1d 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -3,20 +3,19 @@
         <div class="dropdown dropdown-dark">
             <select
                 id="port"
-                :key="modelValue.selectedPort"
-                :model-value="modelValue.selectedPort"
+                :value="modelValue.selectedPort"
+                class="dropdown-select"
                 :title="$t('firmwareFlasherManualPort')"
                 :disabled="disabled"
-                class="dropdown-select"
                 @change="onChangePort"
             >
                 <option value="noselection" disabled>
                     {{ $t("portsSelectNoSelection") }}
                 </option>
-                <option v-show="showManualOption" value="manual">
+                <option v-if="showManualOption" value="manual">
                     {{ $t("portsSelectManual") }}
                 </option>
-                <option v-show="showVirtualOption" value="virtual">
+                <option v-if="showVirtualOption" value="virtual">
                     {{ $t("portsSelectVirtual") }}
                 </option>
                 <option
@@ -53,13 +52,7 @@
                 id="auto-connect-switch"
                 :title="modelValue.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
             >
-                <input
-                    id="auto-connect"
-                    class="auto_connect togglesmall"
-                    type="checkbox"
-                    :checked="modelValue.autoConnect"
-                    @change="onChangeAutoConnect"
-                />
+                <input id="auto-connect" v-model="autoConnect" class="auto_connect togglesmall" type="checkbox" />
                 <span class="auto_connect">
                     {{ $t("autoConnect") }}
                 </span>
@@ -71,51 +64,14 @@
                 <div class="dropdown dropdown-dark">
                     <select
                         id="baud"
+                        v-model="selectedBauds"
                         class="dropdown-select"
-                        :model-value="modelValue.selectedBauds"
                         :title="$t('firmwareFlasherBaudRate')"
                         :disabled="disabled"
-                        @change="updateValue('selectedBauds', $event.target.value)"
                     >
                         <option v-for="baudRate in baudRates" :key="baudRate.value" :value="baudRate.value">
                             {{ baudRate.label }}
                         </option>
-                        <option value="noselection" disabled>
-                            {{ $t("portsSelectNoSelection") }}
-                        </option>
-                        <option v-show="showManualOption" value="manual">
-                            {{ $t("portsSelectManual") }}
-                        </option>
-                        <option v-show="showVirtualOption" value="virtual">
-                            {{ $t("portsSelectVirtual") }}
-                        </option>
-                        <option
-                            v-for="connectedBluetoothDevice in connectedBluetoothDevices"
-                            :key="connectedBluetoothDevice.path"
-                            :value="connectedBluetoothDevice.path"
-                        >
-                            {{ connectedBluetoothDevice.displayName }}
-                        </option>
-                        <option
-                            v-for="connectedSerialDevice in connectedSerialDevices"
-                            :key="connectedSerialDevice.path"
-                            :value="connectedSerialDevice.path"
-                        >
-                            {{ connectedSerialDevice.displayName }}
-                        </option>
-                        <option
-                            v-for="connectedUsbDevice in connectedUsbDevices"
-                            :key="connectedUsbDevice.path"
-                            :value="connectedUsbDevice.path"
-                        >
-                            {{ connectedUsbDevice.displayName }}
-                        </option>
-                        <option value="requestpermission">
-                            {{ $t("portsSelectPermission") }}
-                        </option>
-                        <option value="requestpermissionbluetooth">
-                            {{ $t("portsSelectPermissionBluetooth") }}
-                        </option>
                     </select>
                 </div>
             </div>
@@ -124,7 +80,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, watch } from "vue";
 import { set as setConfig } from "../../js/ConfigStorage";
 import { EventBus } from "../eventBus";
 
@@ -138,45 +94,13 @@ export default defineComponent({
                 autoConnect: true,
             }),
         },
-        data() {
-            return {
-                showVirtual: false,
-                baudRates: [
-                    { value: "1000000", label: "1000000" },
-                    { value: "500000", label: "500000" },
-                    { value: "250000", label: "250000" },
-                    { value: "115200", label: "115200" },
-                    { value: "57600", label: "57600" },
-                    { value: "38400", label: "38400" },
-                    { value: "28800", label: "28800" },
-                    { value: "19200", label: "19200" },
-                    { value: "14400", label: "14400" },
-                    { value: "9600", label: "9600" },
-                    { value: "4800", label: "4800" },
-                    { value: "2400", label: "2400" },
-                    { value: "1200", label: "1200" },
-                ],
-            };
+        connectedSerialDevices: {
+            type: Array,
+            default: () => [],
         },
-        methods: {
-            updateValue(key, value) {
-                this.$emit("input", { ...this.value, [key]: value });
-            },
-            onChangePort(event) {
-                if (event.target.value === "requestpermission") {
-                    EventBus.$emit("ports-input:request-permission");
-                } else if (event.target.value === "requestpermissionbluetooth") {
-                    EventBus.$emit("ports-input:request-permission-bluetooth");
-                } else {
-                    EventBus.$emit("ports-input:change", event.target.value);
-                }
-                this.updateValue("selectedPort", event.target.value);
-            },
-            onChangeAutoConnect(event) {
-                setConfig({ autoConnect: event.target.checked });
-                this.updateValue("autoConnect", event.target.checked);
-                return event;
-            },
+        connectedUsbDevices: {
+            type: Array,
+            default: () => [],
         },
         connectedBluetoothDevices: {
             type: Array,
@@ -195,33 +119,58 @@ export default defineComponent({
             default: true,
         },
     },
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+        const selectedPort = ref(props.modelValue.selectedPort); // Access through modelValue
+        const selectedBauds = ref(props.modelValue.selectedBauds); // Access through modelValue
+        const autoConnect = ref(props.modelValue.autoConnect); // Access through modelValue
+        const baudRates = ref([
+            { value: "1000000", label: "1000000" },
+            { value: "500000", label: "500000" },
+            { value: "250000", label: "250000" },
+            { value: "115200", label: "115200" },
+            { value: "57600", label: "57600" },
+            { value: "38400", label: "38400" },
+            { value: "28800", label: "28800" },
+            { value: "19200", label: "19200" },
+            { value: "14400", label: "14400" },
+            { value: "9600", label: "9600" },
+            { value: "4800", label: "4800" },
+            { value: "2400", label: "2400" },
+            { value: "1200", label: "1200" },
+        ]);
 
-    emits: [
-        "update:modelValue",
-        "ports-input:request-permission",
-        "ports-input:request-permission-bluetooth",
-        "ports-input:change",
-    ],
+        watch(selectedPort, (newValue) => {
+            emit("update:modelValue", { ...props.modelValue, selectedPort: newValue });
+        });
 
-    methods: {
-        updateValue(key, value) {
-            this.$emit("update:modelValue", { ...this.modelValue, [key]: value });
-        },
-        onChangePort(event) {
-            if (event.target.value === "requestpermission") {
+        watch(selectedBauds, (newValue) => {
+            emit("update:modelValue", { ...props.modelValue, selectedBauds: newValue });
+        });
+
+        watch(autoConnect, (newValue) => {
+            emit("update:modelValue", { ...props.modelValue, autoConnect: newValue });
+            setConfig({ autoConnect: newValue });
+        });
+
+        const onChangePort = (event) => {
+            const value = event.target.value;
+            if (value === "requestpermission") {
                 EventBus.$emit("ports-input:request-permission");
-            } else if (event.target.value === "requestpermissionbluetooth") {
+            } else if (value === "requestpermissionbluetooth") {
                 EventBus.$emit("ports-input:request-permission-bluetooth");
             } else {
-                EventBus.$emit("ports-input:change", event.target.value);
+                EventBus.$emit("ports-input:change", value);
             }
-            this.updateValue("selectedPort", event.target.value);
-        },
-        onChangeAutoConnect(event) {
-            setConfig({ autoConnect: event.target.checked });
-            this.updateValue("autoConnect", event.target.checked);
-            return event;
-        },
+        };
+
+        return {
+            selectedPort,
+            selectedBauds,
+            autoConnect,
+            baudRates,
+            onChangePort,
+        };
     },
 });
 </script>
diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue
index d80338e3cf..fea452f950 100644
--- a/src/components/quad-status/BatteryIcon.vue
+++ b/src/components/quad-status/BatteryIcon.vue
@@ -5,118 +5,92 @@
         </div>
     </div>
 </template>
+
 <script>
+import { defineComponent, computed } from "vue";
+
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-import { defineComponent } from 'vue';
 
 export default defineComponent({
-  props: {
-    batteryState: {
-      type: String,
-      default: '',
-    },
-    voltage: {
-      type: Number,
-      default: 0,
-    },
-    computed: {
-        nbCells() {
-            let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
-            if (this.voltage === 0) {
-                nbCells = 1;
-            }
-            return nbCells;
-        },
-        min() {
-            return this.vbatmincellvoltage * this.nbCells;
+    props: {
+        batteryState: {
+            type: String,
+            default: "",
         },
-        max() {
-            return this.vbatmaxcellvoltage * this.nbCells;
+        voltage: {
+            type: Number,
+            default: 0,
         },
-        warn() {
-            return this.vbatwarningcellvoltage * this.nbCells;
+        vbatmaxcellvoltage: {
+            type: Number,
+            default: 1,
         },
-        isEmpty() {
-            return this.voltage < this.min && this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM;
+        vbatwarningcellvoltage: {
+            type: Number,
+            default: 1,
         },
-        classes() {
-            if (this.batteryState) {
+    },
+    setup(props) {
+        const nbCells = computed(() => {
+            let cells = Math.floor(props.voltage / props.vbatmaxcellvoltage) + 1;
+            if (props.voltage === 0) {
+                cells = 1;
+            }
+            return cells;
+        });
+
+        const min = computed(() => {
+            return props.vbatwarningcellvoltage * nbCells.value;
+        });
+
+        const max = computed(() => {
+            return props.vbatmaxcellvoltage * nbCells.value;
+        });
+
+        const warn = computed(() => {
+            return props.vbatwarningcellvoltage * nbCells.value;
+        });
+
+        const isEmpty = computed(() => {
+            return props.voltage < min.value && props.voltage > NO_BATTERY_VOLTAGE_MAXIMUM;
+        });
+
+        const classes = computed(() => {
+            if (props.batteryState) {
                 return {
-                    "state-ok": this.batteryState === 0,
-                    "state-warning": this.batteryState === 1,
-                    "state-empty": this.batteryState === 2,
+                    "state-ok": props.batteryState === "0",
+                    "state-warning": props.batteryState === "1",
+                    "state-empty": props.batteryState === "2",
                     // TODO: BATTERY_NOT_PRESENT
                     // TODO: BATTERY_INIT
                 };
             }
-            const isWarning = this.voltage < this.warn;
+            const isWarning = props.voltage < warn.value;
             return {
-                "state-empty": this.isEmpty,
+                "state-empty": isEmpty.value,
                 "state-warning": isWarning,
-                "state-ok": !this.isEmpty && !isWarning,
+                "state-ok": !isEmpty.value && !isWarning,
             };
-        },
-        batteryWidth() {
-            return this.isEmpty ? 100 : ((this.voltage - this.min) / (this.max - this.min)) * 100;
-        },
-    },
-    vbatmaxcellvoltage: {
-      type: Number,
-      default: 1,
-    },
-    vbatwarningcellvoltage: {
-      type: Number,
-      default: 1,
-    },
-  },
-
-  computed: {
-    nbCells() {
-      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
-      if (this.voltage === 0) {
-        nbCells = 1;
-      }
-      return nbCells;
-    },
-    min() {
-      return this.vbatmincellvoltage * this.nbCells;
-    },
-    max() {
-      return this.vbatmaxcellvoltage * this.nbCells;
-    },
-    warn() {
-      return this.vbatwarningcellvoltage * this.nbCells;
-    },
-    isEmpty() {
-      return this.voltage < this.min && this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM;
-    },
-    classes() {
-      if (this.batteryState) {
+        });
+
+        const batteryWidth = computed(() => {
+            return isEmpty.value ? 100 : ((props.voltage - min.value) / (max.value - min.value)) * 100;
+        });
+
         return {
-          "state-ok": this.batteryState === 0,
-          "state-warning": this.batteryState === 1,
-          "state-empty": this.batteryState === 2,
-          // TODO: BATTERY_NOT_PRESENT
-          // TODO: BATTERY_INIT
+            nbCells,
+            min,
+            max,
+            warn,
+            isEmpty,
+            classes,
+            batteryWidth,
         };
-      }
-      const isWarning = this.voltage < this.warn;
-      return {
-        "state-empty": this.isEmpty,
-        "state-warning": isWarning,
-        "state-ok": !this.isEmpty && !isWarning,
-      };
-    },
-    batteryWidth() {
-      return this.isEmpty
-        ? 100
-        : ((this.voltage - this.min) / (this.max - this.min)) * 100;
     },
-  },
 });
 </script>
 
-<style>
+<style scoped>
 .quad-status-contents {
     display: inline-block;
     margin-top: 10px;
diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue
index ce50978984..20513396b0 100644
--- a/src/components/quad-status/BatteryLegend.vue
+++ b/src/components/quad-status/BatteryLegend.vue
@@ -5,13 +5,28 @@
 </template>
 <script>
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-  props: {
-    voltage: {
-      type: Number,
-      default: 0,
+    props: {
+        voltage: {
+            type: Number,
+            default: 0,
+        },
+        vbatmaxcellvoltage: {
+            type: Number,
+            default: 1,
+        },
+        computed: {
+            reading() {
+                let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
+                if (this.voltage === 0) {
+                    nbCells = 1;
+                }
+                const cellsText = this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : "USB";
+                return `${this.voltage.toFixed(2)}V (${cellsText})`;
+            },
+        },
     },
     computed: {
         reading() {
@@ -23,17 +38,6 @@ export default defineComponent({
             return `${this.voltage.toFixed(2)}V (${cellsText})`;
         },
     },
-  },
-  computed: {
-    reading() {
-      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
-      if (this.voltage === 0) {
-        nbCells = 1;
-      }
-      const cellsText = this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : 'USB';
-      return `${this.voltage.toFixed(2)}V (${cellsText})`;
-    },
-  },
 });
 </script>
 
diff --git a/src/components/status-bar/PortUtilization.vue b/src/components/status-bar/PortUtilization.vue
index 2463b1ee31..8e6f45c874 100644
--- a/src/components/status-bar/PortUtilization.vue
+++ b/src/components/status-bar/PortUtilization.vue
@@ -1,36 +1,28 @@
 <template>
-  <div>
-    <span class="message">{{ $t("statusbar_port_utilization") }}</span>
-    <ReadingStat
-      message="statusbar_usage_download"
-      :model-value="usageDown"
-      unit="%"
-    />
-    <ReadingStat
-      message="statusbar_usage_upload"
-      :model-value="usageUp"
-      unit="%"
-    />
-  </div>
+    <div>
+        <span class="message">{{ $t("statusbar_port_utilization") }}</span>
+        <ReadingStat message="statusbar_usage_download" :model-value="usageDown" unit="%" />
+        <ReadingStat message="statusbar_usage_upload" :model-value="usageUp" unit="%" />
+    </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 import ReadingStat from "./ReadingStat.vue";
 
 export default defineComponent({
-  components: {
-    ReadingStat,
-  },
-  props: {
-    usageDown: {
-      type: Number,
-      default: 0,
-    usageUp: {
-      type: Number,
-      default: 0,
-      },
+    components: {
+        ReadingStat,
+    },
+    props: {
+        usageDown: {
+            type: Number,
+            default: 0,
+        },
+        usageUp: {
+            type: Number,
+            default: 0,
+        },
     },
-  },
 });
 </script>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index a5a202591c..50b1f4c745 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -71,7 +71,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 /** Status bar **/
 #status-bar {
     display: flex;
diff --git a/src/js/fc.js b/src/js/fc.js
index 849aef2c28..b3fe462391 100644
--- a/src/js/fc.js
+++ b/src/js/fc.js
@@ -1,4 +1,5 @@
 import { bit_check } from "./bit";
+import { reactive } from "vue";
 import { API_VERSION_1_45, API_VERSION_1_46 } from "./data_storage";
 import semver from "semver";
 
@@ -989,4 +990,4 @@ const FC = {
     },
 };
 
-export default FC;
+export default reactive(FC);
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 15fb5ded64..dffa2698fe 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -3,6 +3,7 @@ import { EventBus } from "../components/eventBus";
 import serial from "./webSerial";
 import usb from "./protocols/webusbdfu";
 import BT from "./protocols/bluetooth";
+import { reactive } from "vue";
 
 const DEFAULT_PORT = "noselection";
 const DEFAULT_BAUDS = 115200;
@@ -16,7 +17,7 @@ const PortHandler = new (function () {
         selectedPort: DEFAULT_PORT,
         selectedBauds: DEFAULT_BAUDS,
         portOverride: getConfig("portOverride", "/dev/rfcomm0").portOverride,
-        virtualMspVersion: "1.47.0",
+        virtualMspVersion: "1.46.0",
         autoConnect: getConfig("autoConnect", false).autoConnect,
     };
 
@@ -117,14 +118,16 @@ PortHandler.updateCurrentSerialPortsList = async function () {
     const ports = await serial.getDevices();
     const orderedPorts = this.sortPorts(ports);
     this.portAvailable = orderedPorts.length > 0;
-    this.currentSerialPorts = orderedPorts;
+
+    this.currentSerialPorts = [...orderedPorts];
 };
 
 PortHandler.updateCurrentUsbPortsList = async function () {
     const ports = await usb.getDevices();
     const orderedPorts = this.sortPorts(ports);
     this.dfuAvailable = orderedPorts.length > 0;
-    this.currentUsbPorts = orderedPorts;
+
+    this.currentUsbPorts = [...orderedPorts];
 };
 
 PortHandler.updateCurrentBluetoothPortsList = async function () {
@@ -132,7 +135,8 @@ PortHandler.updateCurrentBluetoothPortsList = async function () {
         const ports = await BT.getDevices();
         const orderedPorts = this.sortPorts(ports);
         this.bluetoothAvailable = orderedPorts.length > 0;
-        this.currentBluetoothPorts = orderedPorts;
+
+        this.currentBluetoothPorts = [...orderedPorts];
     }
 };
 
@@ -235,10 +239,12 @@ PortHandler.selectActivePort = function (suggestedDevice) {
     console.log(`[PORTHANDLER] automatically selected device is '${this.portPicker.selectedPort}'`);
 
     // hack to update Vue component
-    const p = document.getElementById('port');
+    const p = document.getElementById("port");
     p.value = this.portPicker.selectedPort;
 
     return selectedPort;
 };
 
-export default PortHandler;
+// We need to explicit make it reactive. If not, Vue3 does not detect correctly changes in array properties
+// like currentSerialPorts, currentUsbPorts, currentBluetoothPorts
+export default reactive(PortHandler);
diff --git a/yarn.lock b/yarn.lock
index 296b80b499..338b9879cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16451,7 +16451,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^3.5.12:
+vue@^3.5.13:
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
   integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==