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 ad2249c23e..47150dd487 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16435,7 +16435,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==