drafted materio_sapi search block vue integration

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

@@ -0,0 +1,88 @@
+<script>
+
+import Vue from 'vue'
+import { MSAPI } from 'vuejs/api/msapi-axios'
+
+export default {
+  data() {
+    return {
+      template: null,
+      typed: ""
+    }
+  },
+  props: ['form'],
+  methods: {
+    keyup() {
+      console.log("search typed", this.typed);
+    },
+    submit() {
+      console.log("search clicked");
+    }
+  },
+  beforeMount() {
+    console.log('SearchForm beforeMount');
+    if(this._props.form){
+      console.log('SearchForm beforeMount if this._props.form ok');
+      this.template = Vue.compile(this._props.form).render
+    }
+  },
+  beforeUpdate() {
+    console.log('SearchForm beforeUpdate');
+    if(this._props.form){
+      console.log('SearchForm beforeUpdate if this._props.form ok');
+      this.template = Vue.compile(this._props.form).render
+    }
+  },
+  mounted(){
+    console.log('SearchForm mounted');
+    // Drupal.attachBehaviors(this.$el);
+  },
+  updated(){
+    console.log('SearchForm updated');
+    // Drupal.attachBehaviors(this.$el);
+  },
+  render(h) {
+    console.log('searchForm render');
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template()
+    }
+  }
+}
+// searchform: (resolve, reject) => (
+//   MSAPI.get(`/search_form`)
+//     .then(({data}) => {
+//       // console.log("materiosapisearchform", data);
+//       resolve({
+//         data() {
+//           return {
+//             typed:""
+//           }
+//         },
+//         methods: {
+//           keyup() {
+//             console.log("search typed", this.typed);
+//           },
+//           submit() {
+//             console.log("search clicked");
+//           }
+//         },
+//         mounted() {
+//           Drupal.attachBehaviors(this.$el);
+//         },
+//         template: data.rendered
+//       })
+//     })
+//     .catch(( error ) => {
+//         console.warn('Issue with get searchform', error)
+//         Promise.reject(error)
+//     })
+//
+// )
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>