Cuando trabajas con instancias de componentes en Vue.js, ganas algo poderoso: la capacidad de controlar tu aplicación desde Vanilla JavaScript sin depender al 100% del framework. Esto te sirve si quieres integrar Vue.js como una librería más dentro de un proyecto existente y no como el dueño absoluto de tu arquitectura.

Cada vez que defines un componente, estás creando una unidad de código encapsulada bajo un nombre. Pero también estás generando una copia del objeto original de Vue, con todas sus opciones y elementos disponibles para leer o modificar.

¿Qué es una instancia de componente en Vue.js?

Una instancia es la materialización de un componente cuando se monta sobre el Document Object Model del navegador. Aquí entra el concepto de ViewModel, esa pieza intermedia que conecta tu objeto de Vue con el DOM real.

Desde dentro del componente puedes acceder a sus variables, métodos y propiedades computadas usando this. Lo interesante es que también puedes hacerlo desde fuera, atacando la instancia directamente con JavaScript plano.

¿Qué diferencia hay entre un componente y una instancia en Vue.js? El componente es la definición o plantilla; la instancia es la copia viva y montada de ese componente en el DOM, con sus propios datos y referencias.

¿Cómo accedo a los datos de un componente desde Vanilla JS?

Si guardas tu ViewModel en una variable y haces un console.log, vas a ver que Vue.js lo encapsula en un proxy reactivo. Desde ahí puedes leer y manipular variables como text directamente [01:30].

Esto aplica para cualquier componente, no solo el raíz. Cada instancia expone los mismos atributos clave que te permiten navegar su estructura interna.

¿Qué hace el atributo data en una instancia?

El atributo data contiene todas las variables reactivas declaradas en el componente. Es el primer punto de entrada cuando quieres leer el estado actual.

Por ejemplo, si declaras una variable text con valor "Hola, Vue", vas a poder acceder a ella tanto desde this.text dentro del componente como desde la instancia exterior.

¿Para qué sirve el atributo root?

El atributo root siempre te devuelve el objeto raíz de tu aplicación, es decir, el componente que contiene todo el árbol [02:50]. Sin importar desde qué nivel del árbol estés, root te lleva al origen.

Esto resulta útil cuando necesitas acceder a configuración global o a datos que viven en el componente principal desde un componente hijo profundo.

¿Cómo manipulo el DOM real de un componente Vue?

Vue.js te da una sintaxis declarativa para evitar tocar el DOM manualmente, pero a veces necesitas hacerlo. Para esos casos existe el atributo el.

El atributo el te entrega el elemento HTML sobre el que se montó la instancia. Una vez ahí, puedes usar todas las propiedades nativas como si hubieras hecho un getElementById con Vanilla JavaScript.

js const vm = app.mount('#app') console.log(vm.$el)

¿Cuándo debo usar el atributo el en lugar de Vue? Úsalo cuando necesites integrar librerías externas que requieren un nodo del DOM real, o cuando hagas manipulaciones puntuales que Vue no contempla.

¿Cómo creo referencias a componentes específicos con refs?

El atributo ref te permite crear una referencia única a un componente o elemento dentro de tu plantilla. Le asignas un nombre como cadena de texto y luego lo consultas desde la instancia padre [04:30].

• Declara la referencia en el template: ref="elemento".
• Accede desde JavaScript con vm.$refs.elemento.
• Usa el nombre como identificador único dentro de toda la aplicación.

El resultado es un proxy reactivo que observa al componente referenciado. Puedes leer sus props, métodos o cualquier dato expuesto, lo cual te da un puente directo entre componentes sin pasar por eventos ni bindings.

¿Cómo accedo a los props de un componente hijo?

Una vez tienes la referencia, puedes consultar el atributo props para ver los valores que recibió ese componente. Por ejemplo, si creas un componente b-button que recibe un prop llamado label, vas a poder leer su valor desde la referencia [05:40].

html <b-button ref="elemento" :label="text"></b-button>

En el componente raíz no encontrarás props porque no recibe ninguno, pero en componentes hijos esto se vuelve la vía rápida para inspeccionar qué información llegó desde arriba.

¿Por qué importa controlar Vue.js desde Vanilla JavaScript?

La filosofía detrás de estos atributos es darte libertad. Vue.js puede funcionar como un framework completo que organiza toda tu aplicación, o puede actuar como una librería más dentro de un proyecto que mezcla otras tecnologías.

Con data, root, el, refs y props tienes los puntos de control esenciales. La documentación oficial de Vue.js incluye otros atributos para acceder a slots y características adicionales de cada instancia, así que vale la pena explorarla cuando tu caso de uso lo pida.

¿Ya probaste integrar Vue.js junto con otras librerías en un mismo proyecto? Cuéntame en los comentarios qué combinación usaste y qué retos encontraste al mezclar estilos de control.