Best Way to Re-render Vue 3 Components: Master Guide

You will see 2 techniques for re-rendering your components. These are:

• Re-render components using the v-if directive (Not recommended).
• Re-render components by changing key values.

Even though using the "key changing technique" is better for this purpose, we'll discuss both methods so that you can understand the difference and why it is better than another.

To ensure that Vue re-renders a component, it is recommended to specify a key attribute on the component. Just change the value of the key attribute, whenever the component needs to be re-rendered.

This will signal Vue to treat the component as a new instance, thereby triggering a re-render of the component. Vue will be able to track the identity of the component instance with this key and update it accordingly.

Force Vue 3 to Re-render Components by Changing Key Value

You can add the key attribute to your component to re-render it just by changing the key value. Whenever the key value changes, it will send a signal to Vue that this component has been updated.

Therefore, Vue will re-render this component as new from scratch and removes the old instance.

          // Parent.vue

<template>
    <Child :key="renderKey" />

    <button @click="updateComponent">Re-render</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const renderKey = ref(0)

const updateComponent = () => {
    renderKey.value = renderKey.value + 1
}
</script>
        

Here, I have a renderKey property created using the ref function. Its initial value is 0. I am using the :key attribute with the Child component and set renderKey as the value of this attribute.

Whenever I click the button, it increments the renderKey value. As the key value has changed, Vue will consider the Child component as a new instance.

As a result, Vue will re-render the Child component with the updated renderKey value. This is called the "Key changing technique".

Re-render a Vue 3 Component From Itself

So far we have re-rendered a child component by clicking a button from a parent. But sometimes you might want to reload a component from within itself.

You can also do it by passing data from a child to the parent component and following the key-changing technique to re-render your Vue 3 component.

The Parent.vue Component:

          // Parent.vue

<template>
    <Child :self-reload="updateComponent" :key="renderKey" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const renderKey = ref(0)

const updateComponent = () => {
    renderKey.value += 1
}
</script>
        

Like the previous example, I am setting the :key attribute with the renderKey value to my Child component. I am also passing the updateComponent function to this component as a prop.

This function will increment the renderKey value which will re-render the Child component. But this time we will execute this function inside the Child component.

The Child.vue Component:

          // Child.vue

<template>
    <div>
        <h2>Child component</h2>

        <button @click="selfReload">Reload Me</button>
    </div>
</template>

<script setup>
const props = defineProps<{ selfReload: () => void }>()
</script>
        

Inside my Child component, I am getting the updateComponent function as the selfReload prop. I also have a button that executes this function whenever it gets clicked.

That's how you can call the updateComponent function from your child component. It will change the key value. As a result, Vue will re-render the Child component.

Also Read: Improve Performance in Vue 3 Using Lazy Loading and Dynamic Import

Re-render Vue 3 Components with v-if Directive

You can reload your Vue 3 components using the conditional rendering technique. For that, we have a v-if directive.

If you pass a truthy value to this directive, it will render the component on the page. Otherwise, it will remove the component.

          // Parent.vue

<template>
    <Child v-if="isRendered" />

    <button @click="updateComponent">Re-render</button>
</template>

<script setup>
import Child from './Child.vue'
import { nextTick, ref } from 'vue'

const isRendered = ref(true)

const updateComponent = async () => {
    isRendered.value = false

    await nextTick()

    isRendered.value = true
}
</script>
        

Here the Child component is being rendered within the Parent.vue component using a v-if directive, which conditionally renders the child component based on the boolean value of the isRendered property.

Whenever you need to refresh this child component, you will click the button and it will change the value of isRendered ref inside the updateComponent function.

In this function, I am setting the value of isRendered to false, which will remove the child component from the page. Then you have to set its value to true only after updating the DOM.

You can wait for the DOM to update by calling the nextTick() function provided by Vue. I am using await keyword because this function returns a promise.

When this child component is removed from the DOM completely, it will again set the value of isRendered to true. Therefore, Vue will render this component again.

Why shouldn't you use this technique to re-render your components?

Even though this technique works but there is an obvious problem. As you can see, every time you click the button, DOM will update twice.

It will update when the child component gets removed and when it gets added to the DOM. That's why it's not optimal for performance.

Also Read: Style Child Components & Dynamic HTML Using Vue 3 Deep Selector