Extract SearchInput logic into parent

components/SearchInput.vue

@@ -36,6 +36,7 @@
           @blur.capture.native="onBlur"
           @keyup.delete.native="onDelete"
           @keyup.esc.native="clear"
+          @input.exact="onSelect"
           @input.native="handleInput"
           @click.capture.native="isOpen = true"
         >
@@ -134,17 +135,6 @@ export default {
         : this.$t('search.hint')
     }
   },
-  watch: {
-    searchValue(item) {
-      if (item && item.slug) {
-        this.isOpen = false
-        this.$router.push(`/post/${item.slug}`)
-        this.$nextTick(() => {
-          this.searchValue = this.lastSearchTerm
-        })
-      }
-    }
-  },
   methods: {
     async query(value) {
       if (isEmpty(value) || value.length < 3) {
@@ -163,6 +153,13 @@ export default {
         this.query(value)
       }, this.delay)
     },
+    onSelect(item) {
+      this.isOpen = false
+      this.$emit('select', item)
+      this.$nextTick(() => {
+        this.searchValue = this.lastSearchTerm
+      })
+    },
     onFocus(e) {
       clearTimeout(this.searchProcess)
       this.isOpen = true

layouts/default.vue

@@ -19,6 +19,7 @@
             :results="quickSearchResults"
             @clear="quickSearchClear"
             @search="value => quickSearch({ value })"
+            @select="goToPost"
           />
         </div>
         <div class="main-navigation-right">
@@ -180,6 +181,12 @@ export default {
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch'
     }),
+    goToPost(item) {
+      this.$router.push({
+        name: 'post-slug',
+        params: { slug: item.slug }
+      })
+    },
     matcher(url, route) {
       if (url.indexOf('/profile') === 0) {
         // do only match own profile