Demo of viewScriptModule

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "title": "Jon's cool counter",
  "name": "jon/the-block",
  "editorScript": "file:./index.js",
  "viewScriptModule": "file:./view.js",
  "render": "file:./render.php",
  "category": "text"
}

index.asset.php

<?php return array('dependencies' => array('react', 'wp-blocks'), 'version' => '36efaf9a0f26eb9312c9');

index.js

(()=>{"use strict";const e=window.React,t=window.wp.blocks,o=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"title":"Jon\'s cool counter","name":"jon/the-block","editorScript":"file:./index.ts","viewModule":"file:./view.mts","render":"file:./render.php","category":"text"}');t.registerBlockType(o,{edit:()=>(0,e.createElement)("div",null,"counter"),save:()=>(0,e.createElement)("div",null,"counter")})})();

plugin.php

<?php
/*
 * Plugin Name: A counter
 */

add_action(
	'init',
	function () {
		register_block_type_from_metadata(__DIR__ . '/block.json');
	}
);

render.php

<div data-wp-interactive='{"namespace":"jon/the-block"}' data-wp-context='{"val":0}'>
	<input readonly type='number' class='jon-val' data-wp-bind--value='context.val' value='0' />
	<button class='jon-inc' data-wp-on--click='actions.inc'>+</button>
	<button class='jon-dec' data-wp-on--click='actions.dec'>-</button>
</div>

view.asset.php

<?php return array('dependencies' => array(), 'version' => '75dbd483e746933f689a', 'type' => 'module');

view.js

function e(e){e.preventDefault(),e.target.parentElement.querySelector(".jon-val").value--}function t(e){e.preventDefault(),e.target.parentElement.querySelector(".jon-val").value++}function n(){[...document.querySelectorAll(".jon-inc")].forEach((e=>e.addEventListener("click",t))),[...document.querySelectorAll(".jon-dec")].forEach((t=>t.addEventListener("click",e)))}"loading"!==document.readyState?n():document.addEventListener("DOMContentLoaded",n);