major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

src/components/LimitPrice.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-text-field v-model="os[storeVar]" :label="getLabel" type="number"
+                variant="outlined" aria-valuemin="0" min="0"
+                clearable :rules="rules" v-auto-select>
+    <template v-slot:append-inner>
+      <v-btn variant="outlined" @click="os.inverted=!os.inverted">
+        {{ os.pairSymbol }}
+      </v-btn>
+    </template>
+    <template #details style="flex-direction: column-reverse">
+      <div>
+        Current price&nbsp;<route-price :inverted="routeInverted(os.route)" :route="os.route" class="text-green"/>
+      </div>
+    </template>
+  </v-text-field>
+</template>
+
+<script setup>
+import {useOrderStore, useStore} from "@/store/store";
+import {routeInverted} from "@/misc.js";
+import RoutePrice from "@/components/RoutePrice.vue";
+import {validateAmount, validateRequired} from "@/validate.js";
+import {computed} from "vue";
+// noinspection ES6UnusedImports
+import {vAutoSelect} from "@/misc.js";
+
+const os = useOrderStore()
+const props = defineProps({
+  required: {default: false},
+  label: {default: null},
+  storeVar: {default: 'limitPrice'},
+  showPrice: {default: true},
+})
+const rules = computed(()=>props.required ? [validateAmount, validateRequired] : [validateAmount])
+
+const getLabel = computed(()=>props.label !== null ? props.label : (os.limitIsMinimum?'Minimum':'Maximum') +' Price')
+
+</script>