docs: emphasize on useStore and onInput$ (#5719)

packages/docs/src/routes/demo/state/counter-store/index.tsx

@@ -1,12 +1,16 @@
 import { component$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
-  const state = useStore({ count: 0 });
+  const state = useStore({ count: 0, name: 'Qwik' });
 
   return (
     <>
       <button onClick$={() => state.count++}>Increment</button>
       <p>Count: {state.count}</p>
+      <input
+        value={state.name}
+        onInput$={(_, el) => (state.name = el.value)}
+      />
     </>
   );
 });

packages/docs/src/routes/docs/(qwik)/components/events/index.mdx

@@ -20,6 +20,7 @@ contributors:
   - mrhoodz
   - julianobrasil
   - maiieul
+  - Balastrong
 updated_at: '2024-01-09T20:55:11Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -54,6 +55,8 @@ export default component$(() => {
 ```
 </CodeSandbox>
 
+You can also use `bind:propertyName` to conveniently have a [two-way binding](/docs/(qwik)/components/rendering/index.mdx#bind-attribute) between a signal and an input element.
+
 Notice that `onClick$` ends with [`$`](/docs/(qwik)/advanced/dollar/index.mdx). This is a hint to both the [Optimizer](/docs/(qwik)/advanced/optimizer/index.mdx) and the developer that a special transformation occurs at this location. The presence of the `$` suffix implies a lazy-loaded boundary here. The code associated with the `click` handler will not be loaded into the JavaScript VM until the user triggers the `click` event, however, it will be [loaded into the browser cache](/docs/advanced/speculative-module-fetching/) eagerly so as not to cause delays on first interactions.
 
 > In real-world applications, the listener may refer to complex code. By creating a lazy-loaded boundary (with the `$`), Qwik can tree-shake all of the code behind the click listener and delay its loading until the user clicks the button.

packages/docs/src/routes/docs/(qwik)/components/rendering/index.mdx

@@ -16,6 +16,7 @@ contributors:
   - igorbabko
   - mrhoodz
   - thejackshelton
+  - Balastrong
 updated_at: '2023-09-19T17:37:26Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -169,6 +170,8 @@ export default component$(() => {
 })
 ```
 
+> It does not work with `useStore` since it does not return a signal, but you can still use the manual approach ( value + onInput$ ) as shown below.
+
 The `bind:` is compiled away by the Qwik optimizer to a property set and an event handler, ie, it is just syntax sugar.
 
 ```tsx /bind:value/ /bind:checked/ /firstName/#a /acceptConditions/#b

packages/docs/src/routes/docs/(qwik)/components/state/index.mdx

@@ -32,6 +32,7 @@ contributors:
   - fabian-hiller
   - julianobrasil
   - aivarsliepa
+  - Balastrong
 updated_at: '2023-10-04T21:48:45Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -82,12 +83,16 @@ Use `useStore(initialStateObject)` hook to create a reactive object. It takes an
 import { component$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
-  const state = useStore({ count: 0 });
+  const state = useStore({ count: 0, name: 'Qwik' });
 
   return (
     <>
       <button onClick$={() => state.count++}>Increment</button>
       <p>Count: {state.count}</p>
+      <input
+        value={state.name}
+        onInput$={(_, el) => (state.name = el.value)}
+      />
     </>
   );
 });