diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index 1a943f2327..d3663f5068 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -5,9 +5,10 @@
     <div class="dropdown dropdown-dark">
       <select
         id="firmware-version-dropdown"
+        :value="value"
         class="dropdown-select"
         :title="$t('virtualMSPVersion')"
-        v-model="value"
+        @input="$emit('input', $event.target.value)"
       >
         <option
           v-for="(version, index) in firmwareVersions"
@@ -23,24 +24,24 @@
 
 <script>
 export default {
-    props: {
-        value: {
-            type: String,
-            default: "1.46.0",
-        },
-    },
-    data() {
-        return {
-            firmwareVersions: [
-                { 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.*" },
-                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
-                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
-                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
-            ],
-        };
+  props: {
+    value: {
+        type: String,
+        default: "1.46.0",
     },
+  },
+  data() {
+    return {
+      firmwareVersions: [
+        { 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.*" },
+        { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
+        { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
+        { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
+      ],
+    };
+  },
 };
 </script>
 
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index 15b5dc6e02..e3748352a3 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -5,23 +5,18 @@
     ><span>{{ $t("portOverrideText") }}</span>
       <input
         id="port-override"
-        type="text"
         v-model="value"
+        type="text"
       ></label>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    value: {
-      type: String,
-      default: "/dev/rfcomm0",
-    },
-    isManual: {
-        type: Boolean,
-        default: true,
-    },
+  data() {
+    return {
+      value: "/dev/rfcomm0",
+    };
   },
 };
 </script>
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 317f79a6c5..74f6ae8806 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,17 +1,21 @@
 <template>
   <div class="web-port-picker">
-    <PortOverrideOption 
+    <PortOverrideOption
       v-if="value.selectedPort === 'manual'"
-      v-model="value.portOverride"
+      :value="value.portOverride"
+      @input="updateValue('portOverride', $event)"
     />
-    <FirmwareVirtualOption 
-      v-if="value.selectedPort === 'virtual'" 
-      v-model="value.virtualMspVersion"
+    <FirmwareVirtualOption
+      v-if="value.selectedPort === 'virtual'"
+      :value="value.virtualMspVersion"
+      @input="updateValue('virtualMspVersion', $event)"
     />
-    <PortsInput 
-      v-model="value" 
+    <PortsInput
+      :value="value"
       :connected-devices="connectedDevices"
-      :disabled="disabled" />
+      :disabled="disabled"
+      @input="updateValue(null, $event)"
+    />
   </div>
 </template>
 
@@ -21,30 +25,39 @@ import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
 import PortsInput from "./PortsInput.vue";
 
 export default {
-  props: {
-      value: {
-        type: Object,
-        default: {
-          selectedPort: "manual", 
-          selectedBaud: 115200,
-          portOverride: "/dev/rfcomm0",
-          virtualMspVersion: "1.46.0",
-        },
-      },
-      connectedDevices: {
-        type: Array,
-        default: () => [],
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-  },
   components: {
     PortOverrideOption,
     FirmwareVirtualOption,
     PortsInput,
   },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({
+        selectedPort: "manual",
+        selectedBaud: 115200,
+        portOverride: "/dev/rfcomm0",
+        virtualMspVersion: "1.46.0",
+      }),
+    },
+    connectedDevices: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    updateValue(key, value) {
+      if (key != null) {
+        this.$emit("input", { ...this.value, [key]: value });
+      } else {
+        this.$emit("input", { ...this.value, ...value});
+      }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index c9ac85d1be..a0deb0f52f 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -6,11 +6,12 @@
     <div class="dropdown dropdown-dark">
       <select
         id="port"
+        :value="value.selectedPort"
         class="dropdown-select"
         :title="$t('firmwareFlasherManualPort')"
         :disabled="disabled"
-        v-model="value.selectedPort"
         @change="onChange"
+        @input="updateValue('selectedPort', $event.target.value)"
       >
         <option value="manual">
           {{ $t("portsSelectManual") }}
@@ -34,16 +35,18 @@
       </select>
     </div>
     <div id="auto-connect-and-baud">
-      <div id="baudselect"
+      <div
         v-if="value.selectedPort !== 'virtual'"
+        id="baudselect"
       >
         <div class="dropdown dropdown-dark">
           <select
             id="baud"
-            v-model="value.selectedBauds"
+            :value="value.selectedBauds"
             class="dropdown-select"
             :title="$t('firmwareFlasherBaudRate')"
             :disabled="disabled"
+            @input="updateValue('selectedBauds', $event.target.value)"
           >
             <option
               v-for="baudRate in baudRates"
@@ -64,65 +67,67 @@ import { get as getConfig } from '../../js/ConfigStorage';
 import { EventBus } from '../eventBus';
 
 export default {
-    props: {
-      value: {
-        type: Object,
-        default: {
-          selectedPort: 'manual', 
-          selectedBaud: 115200,
-        },
-      },
-      connectedDevices: {
-        type: Array,
-        default: () => [],
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({
+        selectedPort: 'manual',
+        selectedBauds: 115200,
+      }),
     },
-
-    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" },
-            ],
-        };
+    connectedDevices: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    mounted() {
-      EventBus.$on('config-storage:set', this.setShowVirtual);
-      this.setShowVirtual('showVirtualMode');
+  },
+  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" },
+          ],
+      };
+  },
+  mounted() {
+    EventBus.$on('config-storage:set', this.setShowVirtual);
+    this.setShowVirtual('showVirtualMode');
+  },
+  destroyed() {
+    EventBus.$off('config-storage:set', this.setShowVirtual);
+  },
+  methods: {
+    updateValue(key, value) {
+      this.$emit('input', { ...this.value, [key]: value });
     },
-    destroyed() {
-      EventBus.$off('config-storage:set', this.setShowVirtual);
+    setShowVirtual(element) {
+      if (element === 'showVirtualMode') {
+        this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
+      }
     },
-    methods: {
-      setShowVirtual(element) {
-        if (element === 'showVirtualMode') {
-          this.showVirtual = getConfig('showVirtualMode').showVirtualMode;
-        }
-      },
-      onChange(event) {
-        if (event.target.value === 'requestpermission') {
-          EventBus.$emit('ports-input:request-permission');
-        } else {
-          EventBus.$emit('ports-input:change', event.target.value);
-        }
-      },
+    onChange(event) {
+      if (event.target.value === 'requestpermission') {
+        EventBus.$emit('ports-input:request-permission');
+      } else {
+        EventBus.$emit('ports-input:change', event.target.value);
+      }
     },
+  },
 };
 </script>
 <style scoped>
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index a851c4faf6..0ebcd0a5c5 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -278,7 +278,7 @@ PortHandler.sortPorts = function(ports) {
 
 PortHandler.updatePortSelect = function (ports) {
     ports = this.sortPorts(ports);
-    this.currentPorts = ports;    
+    this.currentPorts = ports;
 };
 
 PortHandler.askPermissionPort = function() {
diff --git a/src/js/webSerial.js b/src/js/webSerial.js
index 79accf8b18..7bbb9dd382 100644
--- a/src/js/webSerial.js
+++ b/src/js/webSerial.js
@@ -75,7 +75,7 @@ class WebSerial extends EventTarget {
 
     createPort(port) {
         return {
-            path: `D${this.port_counter}`,
+            path: `D${this.port_counter++}`,
             displayName: `Betaflight ${vendorIdNames[port.getInfo().usbVendorId]}`,
             vendorId: port.getInfo().usbVendorId,
             productId: port.getInfo().usbProductId,
@@ -92,18 +92,18 @@ class WebSerial extends EventTarget {
         this.ports = ports.map(function (port) {
             return this.createPort(port);
         }, this);
-    };
+    }
 
     async requestPermissionDevice() {
         const permissionPort = await navigator.serial.requestPort({
             filters: webSerialDevices,
         });
-        const found = this.ports.find(port => port.port === device);
+        const found = this.ports.find(port => port.port === permissionPort);
         if (!found) {
             return this.handleNewDevice(permissionPort);
         }
         return null;
-    }; 
+    }
 
     async getDevices() {
         return this.ports;