<!--
 https://www.youtube.com/watch?v=0L6GXC5jl1I 
-->

<script setup>
import { ref, computed, toValue } from 'vue'

function useName(name) {
  const changedName = computed(() => toValue(name).toUpperCase())
 return {
  changedName
 }
}

const msg = ref('Hello World!')
const { changedName }  = useName(() => msg.value)  // getter: nebo props  () => props.neco
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  {{ changedName }}
</template>