Sun Jun 18 10:50:00 UTC 2023 inscode

src/App.vue

 <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>

src/components/Counter.vue

+<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>