loading and displaying real login form and register form from drupal

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

@@ -28,11 +28,10 @@
     <Modal
       v-if="showLoginModal"
       @close="closeModal"
+      :styles="{width:'500px', height:'100%'}"
     >
-      <div>
-        Please login or register before continue.
-      </div>
-      <LoginRegisterForm @onLogedIn="logedIn"/>
+      <h2>Please login or register before continue.</h2>
+      <LoginRegister @onLogedIn="logedIn" />
     </Modal>
 
   </article>
@@ -44,7 +43,7 @@ import { REST } from 'vuejs/api/rest-axios'
 import router from 'vuejs/route'
 import { mapState, mapActions } from 'vuex'
 import Modal from 'vuejs/components/Helper/Modal'
-import LoginRegisterForm from 'vuejs/components/Helper/LoginRegisterForm'
+import LoginRegister from 'vuejs/components/Helper/LoginRegister'
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -108,7 +107,7 @@ export default {
   },
   components: {
     Modal,
-    LoginRegisterForm
+    LoginRegister
   }
 }
 </script>