fix typos; begin creation of 2nd app

groups/home/Vue3-v.4.html

@@ -12,7 +12,7 @@
   <!-- BEGIN: content -->
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
     <div id="s-lg-index-cols">
-      <div id="app">
+      <div id="app1">
         <!-- vue app -->
         <div class="row">
           <div id="obsolete_browser_alert"></div>
@@ -120,8 +120,10 @@
     <div class="container" style="margin-top: 14px">
       <div class="row kbcc-background-image">
         <div class="col-sm-8">
+          <div id="app2">
             <onesearch-component></onesearch-component>
           </div>
+        </div>
         <div class="col-sm-4">
           <div class="nav-by-jumbotron">
             <a class="ga-by-jumbotron">

groups/home/src/main4.js

@@ -49,15 +49,16 @@ const navigComponent = {
   </nav>`
 }
 
-const onesearchComponent {
+const onesearchComponent = {
-`<form class="form-inline onesearch-jumbotron"
+  template:
+  `<form class="form-inline onesearch-jumbotron"
       name="searchPrimoForm1"
       ref="oneSearchForm"
       role="search"
       method="get"
       :action="selectedItem.baseUrl"
       enctype="application/x-www-form-urlencoded; charset=utf-8"
->
+  >
     <!-- default is "everything"  option suggested from OLS widget builder -->
     <div v-if="selectedItem.input" v-html="selectedItem.input"></div>
     <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
@@ -137,7 +138,7 @@ createApp({
   components: {
     'navig-component': navigComponent,
     'hamburger-component': hamburgerComponent,
-    'onesearch-componet': onesearchComponent
+    'onesearch-component': onesearchComponent
   },
   methods: {
     selectDropdown(item, itemName) {