Vue.js Force Re-render Of Component Which Contains V-once Directive

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. v

Solution 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>

Solution 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.