refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -28,7 +28,7 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var _v_sitebranding_block, _v_user_block, _v_main_content, _v_search_block;
+    var _v_sitebranding_block, _v_pagetitle_block, _v_user_block, _v_main_content, _v_search_block;
     var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
@@ -44,6 +44,7 @@ import 'theme/assets/styles/main.scss'
 
     function initVues(){
       initVSiteBrandingBlock()
+      initVPagetitleBlock()
       initVUserBlock()
       initVMainContent()
       initVSearchBlock()
@@ -60,11 +61,36 @@ import 'theme/assets/styles/main.scss'
             let href = event.target.getAttribute('href');
             // console.log("Clicked on logo href", href);
             this.$router.push(href)
+            this.$store.commit('Common/setPagetitle', null)
           }
         }
       })
     }
 
+    function initVPagetitleBlock(){
+      let $blk = document.querySelector('#block-pagetitle')
+      let $h2 = $blk.querySelector('h2')
+      // get the loaded pagetitle
+      let title = $h2.innerText
+      // if not front recorde the loaded pagetitle in store
+      if (!_is_front) {
+        store.commit('Common/setPagetitle', title)
+      }
+      // replace in template the pagetitle by vue binding
+      $h2.innerText = '{{ pagetitle }}'
+      // create the vue
+      _v_pagetitle_block = new Vue({
+        store,
+        router,
+        el: $blk,
+        computed: {
+          ...mapState({
+            pagetitle: state => state.Common.pagetitle
+          })
+        },
+      })
+    }
+
     function initVUserBlock(){
       let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
       let props = {
@@ -126,7 +152,8 @@ import 'theme/assets/styles/main.scss'
         // else create the empty block to fill it later with async data
         $search_block = document.createElement('div')
         $search_block.setAttribute('id', id)
-        let $region = document.getElementById('content-top');
+        // TODO: get region by REST
+        let $region = document.getElementById('header-bottom');
         $region.appendChild($search_block);
       }