handled home loading if not available in dom (if drupalSettings.path.isFront == false)

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -4,7 +4,7 @@ import Vue from 'vue'
 
 import router from 'vuejs/route'
 
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   router,
@@ -12,25 +12,26 @@ export default {
   data() {
     return {
       template: null,
-      keys: "",
-      autocomplete: ""
+      typed: null,
+      autocomplete: null
     }
   },
+  computed: {
+    ...mapState({
+      keys: state => state.Search.keys,
+      term: state => state.Search.term
+    })
+  },
   methods: {
-    ...mapActions({
-      newSearch: 'Search/newSearch'
-    }),
     submit() {
       console.log("search clicked", this.keys, this.autocomplete);
-      this.newSearch(this.keys, this.autocomplete)
-        .then(() => {
-          this.$router.push({name:'base'})
-        });
+      // New search is triggered by Base.vue with router (which will also fill the store)
+      this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();
       // console.log('autoCompleteSelect', event, ui);
-      this.keys = ui.item.label
+      this.typed = ui.item.label
       this.autocomplete = ui.item.value
     }
   },
@@ -46,10 +47,19 @@ export default {
     }
   },
   watch: {
-    keys(){
-      console.log('keys changed', this.keys);
+    keys(n, o){
+      console.log('keys changed', n, o);
+      this.typed = n
+    },
+    term(n, o){
+      console.log('autocomplete changed', n, o);
+      this.autocomplete = n
     }
   },
+  created() {
+    this.typed = this.keys
+    this.autocomplete = this.term
+  },
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);