diff --git a/src/App.vue b/src/App.vue
index eeb13738c5f0f4b51f0fba12c8ffb003ae17470a..5cfe8081472f4b16039e806948dc2fbd49f6ea49 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 0000000000000000000000000000000000000000..79e3f45ee36dad3cb692f1009e14f9ad4833ee15
--- /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>