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

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.

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>

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