From b6b99673e779215d4693acc4f8554e6aed7512ca Mon Sep 17 00:00:00 2001
From: 646d8250666f3d79d7a75f84 <646d8250666f3d79d7a75f84@devide>
Date: Sun, 18 Jun 2023 10:50:00 +0000
Subject: [PATCH] Sun Jun 18 10:50:00 UTC 2023 inscode

---
 src/App.vue                |  7 ++++++-
 src/components/Counter.vue | 12 ++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Counter.vue

diff --git a/src/App.vue b/src/App.vue
index eeb1373..5cfe808 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import HelloWorld from './components/HelloWorld.vue';
 import TheWelcome from './components/TheWelcome.vue';
+import Counter from "./components/Counter.vue";
+
+const counter = ref<number>(1);
 </script>
 
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
+    <h1>{{ counter }}</h1>
+    <Counter :counter="counter"/>
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
     </div>
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
new file mode 100644
index 0000000..79e3f45
--- /dev/null
+++ b/src/components/Counter.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps(['counter']);
+
+const count = ref<number>(props.counter);
+</script>
+
+<template>
+ <h3>{{ count }}</h3>
+ <button @click="()=>count++">+1</button>
+</template>
-- 
GitLab