changes

app/components/SearchBox.vue

@@ -26,7 +26,7 @@
               @blur="lostFocus"
               @keyup.enter="pressEnter"
               @keyup.esc="lostFocus"
-              @input="(e) => debouncedGetSuggestions(e.target.value)"
+              @input="debouncedGetSuggestions($event.target.value)"
               v-model="value"
               :placeholder="placeholder"
             />
@@ -96,7 +96,7 @@
       >
         <button
           class="button is-primary is-light"
-          @click="viewInfo()"
+          @click="viewInfo"
           style="height: 100%"
           type="button"
         >
@@ -167,9 +167,18 @@ const showmodal = ref();
 const params = ref(props.api && $findapi(props.api).params);
 const orgdata = ref();
 const focused = ref(false);
-const pos = ref();
-
-getPos();
+const pos = computed(() => {
+  switch (props.position) {
+    case "is-top-left":
+      return "is-up is-left";
+    case "is-top-right":
+      return "is-up is-right";
+    case "is-bottom-left":
+      return "is-right";
+    case "is-bottom-right":
+      return "is-right";
+  }
+});
 
 if (props.vdata) {
   orgdata.value = props.vdata;
@@ -357,23 +366,6 @@ function viewInfo() {
     vbind: { row: selected.value },
   };
 }
-
-function getPos() {
-  switch (props.position) {
-    case "is-top-left":
-      pos.value = "is-up is-left";
-      break;
-    case "is-top-right":
-      pos.value = "is-up is-right";
-      break;
-    case "is-bottom-left":
-      pos.value = "is-right";
-      break;
-    case "is-bottom-right":
-      pos.value = "is-right";
-      break;
-  }
-}
 </script>
 <style scoped>
 .control.is-loading::after {