diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 072b08094..82dfd6d53 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -90,6 +90,10 @@ function handleFetch( data) {
         :label="t('Location')"
         :option-label="showLabel"
         :placeholder="t('Search by postalCode, town, province or country')"
+        @input-value="locationFilter"
+        :default-filter="false"
+        :input-debounce="100"
+        :class="{ required: $attrs.required }"
         v-bind="$attrs"
         emit-value
         map-options
@@ -97,19 +101,15 @@ function handleFetch( data) {
         clearable
         hide-selected
         fill-input
-        :class="{ required: $attrs.required }"
-        @input-value="locationFilter"
-        :default-filter="false"
-        :input-debounce="100"
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="onPostcodeCreated($event)" />
         </template>
-        <template #option="scope">
-            <QItem v-bind="scope.itemProps">
-                <QItemSection v-if="scope.opt">
-                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                    <QItemLabel caption>{{ showLabel(scope.opt) }}</QItemLabel>
+        <template #option="{itemProps, opt}">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="opt">
+                    <QItemLabel>{{ opt.code }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>