not launching vue on commerce pages

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -31,7 +31,7 @@
       :styles="{width:'500px', height:'100%'}"
     >
       <h2>Please login or register before continue.</h2>
-      <LoginRegister @onLogedIn="logedIn" />
+      <LoginRegister @onLogedIn="logedIn" @onRegistered="registered" />
     </Modal>
 
   </article>
@@ -85,7 +85,11 @@ export default {
     },
     logedIn () {
       console.log('Product: logedIn');
-      this.closeModal()
+      this.addtocart()
+    },
+    registered () {
+      console.log('Product: registered');
+      this.addtocart()
     },
     addtocart () {
       console.log("addtocart")
@@ -97,9 +101,11 @@ export default {
       }])
         .then(({ data }) => {
           console.log('product add to cart REST: data', data)
+          this.closeModal()
+          // TODO: redirect to /cart
         })
         .catch(( error ) => {
-            console.warn('Issue with pricing', error)
+            console.warn('Issue with product add to cart', error)
             Promise.reject(error)
         })
 

web/themes/custom/materiotheme/vuejs/components/Pages/Cart.vue

@@ -1,45 +0,0 @@
-<template>
-  <div id="cart">
-    <div class="loading" v-if="!false">
-      <span>Loading ...</span>
-    </div>
-    <div class="">
-      This the cart
-    </div>
-  </div>
-</template>
-
-<script>
-
-// import Showroom from 'vuejs/components/Content/Showroom'
-// import { mapState, mapActions } from 'vuex'
-
-export default {
-  name: "cart",
-  // data() {
-  //   return {
-  //     items:[],
-  //     page:0
-  //   }
-  // },
-  // computed: {
-  //   ...mapState({
-  //     items: state => state.Showrooms.items
-  //   })
-  // },
-  created(){
-    // if(!this.items.length)
-    //   this.getItems()
-  },
-  methods: {
-    // ...mapActions({
-    //   getItems: 'Showrooms/getItems'
-    // })
-  },
-  // components: {
-  //   Showroom
-  // }
-}
-</script>
-<style lang="scss" scoped>
-</style>

web/themes/custom/materiotheme/vuejs/components/Pages/_Cart.vue

@@ -0,0 +1,35 @@
+<script>
+
+import Vue from 'vue'
+
+export default {
+  props: ['html'], // get the html from parent with props
+  data() {
+    return {
+      template: null // compiled template from html used in render
+    }
+  },
+  beforeMount() {
+    // console.log('Home beforeMount');
+    // compile the html src (coming from parent with props or from ajax call)
+    if(this.html){
+      console.log('html', this.html);
+      this.template = Vue.compile(this.html)
+      this.$options.staticRenderFns = []
+      this._staticTrees = []
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
+    }
+  },
+  render(h) {
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template.render.call(this)
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>