Cómo Recargar una Página o Componente en Vue/Nuxt JS

Para poder refrescar un componente de Vue y que se ejecuten los hooks adecuadamente, este debe ser a los ojos de Vue destruido y creado nuevamente.

Para ello existe una propiedad llamada "key" que se ejecuta internamente y/o manualmente en el framework para reconocer a cada uno de los componentes de Vue, la cual es obligatoria al crear una lista de elementos, siendo similar a un id para el componente.

A continuación, te muestro un ejemplo en el cual agregando y modificando el atributo "key" podemos reconstruir y volver a ejecutar todos los hooks de vida del componente.

<template>
  <main>
    <my-component :key="key" />
    <button @click="refresh">refresh</button>
  </main>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      key: 1
    }
  },
  methods: {
    refresh() {
      this.key++
    }
  }
})
</script>

Componente Padre

<template>
  <div>
    <span>Refresh Component</span>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  created() {
    alert('component refreshed')
  }
})
</script>

Componente Hijo

Importante

Para que el rebuild del componente se ejecute correctamente, la "key" debe ser asignada en el componente padre y no en el componente hijo.

A continuación, te muestro un ejemplo que NO refrescará el componente.

<template>
  <!-- it not works, because the "key" is a simple attribute -->
  <main :key="key">
    <button @click="refresh">refresh</button>
  </main>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      key: 1
    }
  },
  created() {
    alert('component refreshed')
  },
  methods: {
    refresh() {
      this.key++
    }
  }
})
</script>

Componente con una Mala Implementación de la Recarga

Como puedes ver, la key es inicializada desde el componente que se quiere refrescar por lo que Vue no entenderá que se trata de la "key" que se usa para diferenciar a cada componente, sino más bien de un atributo normal de la etiqueta.