diff --git a/docs/blog/vue_comparison.md b/docs/blog/vue_comparison.md
index 88542b60..892dfe09 100644
--- a/docs/blog/vue_comparison.md
+++ b/docs/blog/vue_comparison.md
@@ -57,15 +57,31 @@ class Products(jp.Div):
             total += product["quantity"]
         return total
 
-    def react(self, data):
+        def react(self, data):
         self.ul.delete_components()
         for product in self.products:
             item = jp.Li(a=self.ul)
-            jp.Input(type='number', product=product, a=item, value=product["quantity"], input='self.product["quantity"] = self.value')
-            jp.Span(text=f'{product["quantity"]} {product["name"]}', a=item, style='margin-left: 10px')
+            jp.InputChangeOnly(
+                    type='number',
+                    product=product,
+                    a=item,
+                    value=product["quantity"],
+                    change='self.product["quantity"] = self.value'
+            )
+            jp.Span(
+                    text=f'{product["quantity"]} {product["name"]}',
+                    a=item,
+                    style='margin-left: 10px'
+            )
             if product["quantity"] == 0:
                 jp.Span(text=' - OUT OF STOCK', a=item)
-            jp.Button(text='Add', a=item, product=product, click='self.product["quantity"] += 1', style='margin-left: 10px')
+            jp.Button(
+                    text='Add',
+                    a=item,
+                    product=product,
+                    click='self.product["quantity"] += 1',
+                    style='margin-left: 10px'
+            )
         self.total_inventory.text = f'Total Inventory: {self.total_products()}'
 
 
diff --git a/examples/blog/vue_comparison/product_app_c.py b/examples/blog/vue_comparison/product_app_c.py
index 2741116a..9bf9188b 100644
--- a/examples/blog/vue_comparison/product_app_c.py
+++ b/examples/blog/vue_comparison/product_app_c.py
@@ -27,11 +27,27 @@ def react(self, data):
         self.ul.delete_components()
         for product in self.products:
             item = jp.Li(a=self.ul)
-            jp.Input(type='number', product=product, a=item, value=product["quantity"], input='self.product["quantity"] = self.value')
-            jp.Span(text=f'{product["quantity"]} {product["name"]}', a=item, style='margin-left: 10px')
+            jp.InputChangeOnly(
+                    type='number',
+                    product=product,
+                    a=item,
+                    value=product["quantity"],
+                    change='self.product["quantity"] = self.value'
+            )
+            jp.Span(
+                    text=f'{product["quantity"]} {product["name"]}',
+                    a=item,
+                    style='margin-left: 10px'
+            )
             if product["quantity"] == 0:
                 jp.Span(text=' - OUT OF STOCK', a=item)
-            jp.Button(text='Add', a=item, product=product, click='self.product["quantity"] += 1', style='margin-left: 10px')
+            jp.Button(
+                    text='Add',
+                    a=item,
+                    product=product,
+                    click='self.product["quantity"] += 1',
+                    style='margin-left: 10px'
+            )
         self.total_inventory.text = f'Total Inventory: {self.total_products()}'
 
 
diff --git a/jpcore/webpage.py b/jpcore/webpage.py
index bf9ddb71..5d216eb1 100644
--- a/jpcore/webpage.py
+++ b/jpcore/webpage.py
@@ -130,7 +130,7 @@ def delete_cookie(self, k):
 
     async def run_javascript(self, javascript_string:str, *, request_id=None, send=True):
         """
-        run the given java script code remotely
+        run the given JavaScript code remotely
         
         Args:
             javascript_string(str): the javascript code to run remotely
diff --git a/justpy/gridcomponents.py b/justpy/gridcomponents.py
index 2598a00d..5a97e147 100644
--- a/justpy/gridcomponents.py
+++ b/justpy/gridcomponents.py
@@ -156,21 +156,21 @@ def load_lod(self,lod:list,columnDefs:list=None):
         self.options.rowData=lod
 
     async def run_api(self, command, page):
-        await page.run_javascript(f"""cached_grid_def[{self.grid_id}].api.{command}""")
+        await page.run_javascript(f"""cached_grid_def['{self.grid_id}'].api.{command}""")
 
     async def select_all_rows(self, page):
         await page.run_javascript(
-            f"""cached_grid_def[{self.grid_id}].api.selectAll()"""
+            f"""cached_grid_def['{self.grid_id}'].api.selectAll()"""
         )
 
     async def deselect_rows(self, page):
         await page.run_javascript(
-            f"""cached_grid_def[{self.grid_id}].api.deselectAll()"""
+            f"""cached_grid_def['{self.grid_id}'].api.deselectAll()"""
         )
 
     async def apply_transaction(self, transaction, page):
         await page.run_javascript(
-            f"""cached_grid_def[{self.grid_id}].api.applyTransaction({transaction.__repr__()})"""
+            f"""cached_grid_def['{self.grid_id}'].api.applyTransaction({transaction.__repr__()})"""
         )
 
     def convert_object_to_dict(self):
diff --git a/justpy/templates/js/vue/aggrid.js b/justpy/templates/js/vue/aggrid.js
index 5fdcf048..030a2f52 100644
--- a/justpy/templates/js/vue/aggrid.js
+++ b/justpy/templates/js/vue/aggrid.js
@@ -22,6 +22,7 @@ Vue.component('grid', {
         },
         grid_change() {
             let jp_component_id = this.$props.jp_props.id;
+            let jp_grid_id = 'g' + jp_component_id
             let j = JSON.stringify(this.$props.jp_props.def);
             let grid_def = JSON.parse(j);  // Deep copy the grid definition
             // Define a default cell renderer if none is defined
@@ -77,7 +78,7 @@ Vue.component('grid', {
 
 
             new agGrid.Grid(document.getElementById(jp_component_id.toString()), grid_def);  // the api calls are added to grid_def
-            cached_grid_def['g' + jp_component_id] = grid_def;
+            cached_grid_def[jp_grid_id] = grid_def;
             var auto_size = this.$props.jp_props.auto_size;