UsuarioItem.vue

<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";

const nome = ref("");
const sobrenome: Ref<string> = ref("carvalho carneiro");
const idade = ref(25);

const props = defineProps<{
  foo: string;
  bar?: number;
}>();

onMounted(() => {
  nome.value = "Guilherme de Carvalho Carneiro";
  sobrenome.value = "Carvalho Carneiro";
  idade.value = 45;
});
</script>
<template>
  <div id="linha-nome">{{ nome }} | {{ sobrenome }} - {{ idade }}</div>
</template>