Vue.js force re-render of component which contains v-once directive

Question

Vue 2.0

I have a component which contains a div using the v-once directive to prevent re-render. This same component updates the data it displays when URL parameters change (i.e. vue-router link is clicked, changing url and parameter used in component).

The component successfully re-renders everything with the new data (based on the URL params) except the div with the v-once directive. That div is not refreshed, reloaded, or re-rendered.

I have attempted to use a watcher and vm.$forceUpdate() when the data changes, but this has not had any effect.

Is there a way to force the whole component to re-render? Specifically the portion with the v-once directive? I would like the component to re-render on URL param change, but still not re-render on data change.

Answer 1

This use case can be resolved by surrounding the v-once component in a container, and then triggering component re-render.

I was able to trigger the component re-render by using :key="$route.params.id" on the component in question from within the container.

i.e.

<div id="container-component">
  <custom-component :key="$route.params.id"></custom-component>
</div>

Answer 2

As par the documentation of v-once, If you have applied it on a element, that element will not be updated, even if variable used are changed. from documentation:

Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

If you want to update the element, you should not be using v-once directive.