Add emit-based increments to CounterStateless component

Refactored CounterStateless to emit custom events with increment values on button click. Updated MultipleCounter to handle these events and adjust the counter accordingly, enabling more flexible and dynamic updates.

Author: khannedy

src/components/CounterStateless.vue

@@ -1,11 +1,23 @@
 <script setup>
 
-const {counter, name} = defineProps(["counter", "name"])
+const {counter, name, increment} = defineProps({
+  counter: Number,
+  name: String,
+  increment: Number
+})
+const emits = defineEmits(["click"]);
+
+function buttonClick() {
+  emits("click", increment);
+}
 
 </script>
 
 <template>
-  <h1>Counter {{name}} : {{ counter}}</h1>
+  <div>
+    <h1>Counter {{ name }} : {{ counter }}</h1>
+    <button @click="buttonClick">Increment {{ name }}</button>
+  </div>
 </template>
 
 <style scoped>

src/components/MultipleCounter.vue

@@ -9,15 +9,18 @@ const counter2 = "Budi";
 
 const counter = ref(0);
 
+function increment(value){
+  counter.value += value;
+}
+
 </script>
 
 <template>
   <Counter :name="counter1" initial-count="10"/>
   <Counter v-bind:name="counter2" initial-count="20"/>
 
-  <CounterStateless name="Joko" :counter="counter"/>
-  <CounterStateless name="Morro" :counter="counter"/>
-  <button @click="counter++">Increment Counter</button>
+  <CounterStateless name="Joko" :counter="counter" :increment="1" v-on:click="increment"/>
+  <CounterStateless name="Morro" :counter="counter" :increment="2" @click="increment"/>
 </template>
 
 <style scoped>