example code using v-model and v-effect

assets/js/main.ts

@@ -3,9 +3,15 @@ import { createApp } from './lib/petite-vue.es.js'
 createApp({
 	$delimiters: ['{|', '|}'],
 	urlParams: new URL(location.href).searchParams,
-	mydata: Data(),
+	newdata: '',
+	data: '',
+	save
 }).mount()
 
+function save() {
+	this.data += '\n' + this.newdata
+}
+
 function Data() {
 	return {
 		data: '',

layouts/shortcodes/input.html

@@ -1,11 +1,19 @@
 <div v-scope>
-  <input type="text" name="txt"
+  <input type="text" name="txt" autofocus
- 		 @change="mydata.save($el.value)" />
+		 v-model="newdata"
+ 		 @change="save" />
 </div>
 
 <div v-scope>
-  <pre>id = {| urlParams.get('id') |}</pre>
+  <pre v-effect="$el.textContent = data" ></pre>
-  <pre v-effect="$el.textContent = mydata.data" ></pre>
+</div>
+
+<div v-scope>
+  <pre v-effect="$el.textContent = newdata" ></pre>
+</div>
+
+<div v-scope>
+  <div>id = {| urlParams.get('id') |}</div>
 </div>