# Sandbox ```typescript= const Counter = component$(() => { const store = createStore({ count: 0, dblCount: 0, }); watch$((obs) => { const {count} = obs(store); store.dblCount = count * 2; }); return onRender$(() => <button on$:click={() => store.count++}> {store.count} / {store.dblCount} </button> // <button on:click={qrl('./chunk.js', 'Counter_onRender_click', [store])}>{store.count}</button> // export Counter_onRender_click = () => { // const [store] = useLexicalScope(); // return store.count++; // } ); }) render(document, ( <html> <body> <Counter/> </body> </html> ); ``` ```htmlembedded= <html> <body> <div on:q-render="./chunk.js#Counter_onRender|abc123" on:q-watch="./chunk.js#Counter_watch|abc123.count[abc123]" q:obj="abc123"> <button on:click="./chunk.js#Counter_onRender_click[abc123]"> 0 </button> </div> <script type="qwik/state"> { abc123: {count: 0} } </script> </body> </html> ```