updating header menu while loggin (show base link)

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

@@ -38,6 +38,7 @@ import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 import VLeftContent from 'vuejs/components/Content/LeftContent'
+import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
 
 import { mapState } from 'vuex'
 
@@ -287,30 +288,16 @@ import { MA } from 'vuejs/api/ma-axios'
 
     function initVHeaderMenu () {
       // console.log('initVHeaderMenu');
-      // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
-      // not working : String contains an invalid character
-      // document.querySelectorAll(`#block-header a`).forEach(link => {
-      //   console.log(link);
-      //   link.setAttribute('@click.prevent', 'onclick')
-      // });
-
+      const id = 'block-header'
+      const $html_obj = document.querySelector('#' + id)
+      // console.log('main-content', $main_content);
+      const html = $html_obj.outerHTML
       _v_header_menu = new Vue({
         store,
         i18n,
         router,
-        el: '#block-header',
-        methods: {
-          onclick (event) {
-            // console.log("Clicked on header menu link", event);
-            const href = event.target.getAttribute('href')
-            // let title = event.target.innerText;
-            // console.log("Clicked on header menu link : href", href);
-            this.$router.push(href)
-            // replaced by router.beforeEach
-            // this.$store.commit('Common/setPagetitle', title)
-          }
-        }
-      })
+        render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
+      }).$mount('#' + id)
     }
 
     function initVMainContent () {