Provide / Inject

Si quieren actualizar el username desde el nieto hacia el padre así como si usaramos un emit() cuando necesitamos comunicar de hijo a padre, lo hacemos de la siguiente manera:

1. Declaramos desde el provider (padre) una variable tipo objeto que contenga la constante y el método que hace la actualización, obviamente la constante debe ser reactiva

const username = ref('');
provide('username', { username, updateUsername });

1. Ahora desde el inject (nieto) podemos obtener ambas variables (constante y método) y usarlas cuando querramos de la siguiiente manera

const { username, updateUsername } = inject('username');

Muy fácil.

para volver la variable reactiva la puse asi:

const username = ref(inject("username"));

aunque funcione no se , si sea mala practica

Logré hacer que cambie el valor de username, pero no se muestra el cambio en la vista, ¿por qué será?

<template>
  <h2>{{ fullName }}</h2>
  <h3>Username: {{ username }}</h3>
  <h3>Age: {{ age }}</h3>
</template>

<script>
import { ref, computed, inject, toRef } from "vue"

export default {
  props: {
    firstName: {
      type: String,
      default: "John",
      required: true,
    },
    lastName: {
      type: String,
      default: "Doe",
      required: true,
    }
  },

  setup(props, context) {
    console.log(context)

    const firstName = ref("Miguel")
    const lastName = ref("Reyes")

    let username = toRef(inject("username"))._object
    console.log(username)
    setTimeout(() => {
      username = "David!"
      console.log(username)
    }, 2000)
    const age = inject("age")

    return {
      fullName: computed(() => `${firstName.value} ${lastName.value}`),
      username,
      age,
    }
  }
}
</script>

<style>
</style>

Para volver username reactivo, lo realicé volviendo reactiva la variable antes de poveerla con provide()
Archivo: App.vue

export default {
  setup() {
    const username = ref("pruebas2");
    provide("username", username);
  },
}

Provide / Inject : Es la forma de pasar props (valores) de componentes abuelos a nietos, bisnietos, tataranietos, etc. de una forma mas optima. El valor no es reactivo, es importante usar toRefs() para hacerlo reactivo.

vue js es pésimo loco, wtf con este framework.