how to re render a vue component with ngVue

[rajeshshou]

I need to re render vue component when a value changes. I tried using key attribute but it doesn't work. What is the correct way to re render the vue component with ngVue?

[jaredmcateer]

Any update to the v-props (or v-props-<named-prop>) directive in your angular template should trigger an update cycle in your vue component.

Please have a look at the caveats readme for any gothcas that you might be encountering. https://github.com/ngVue/ngVue/blob/master/docs/caveats.md

[rajeshshou]

I want to re render the whole component again and force a replacement of the component rather than trigger an update cycle.

https://vuejs.org/api/built-in-special-attributes.html#key:~:text=It%20can%20also%20be%20used%20to%20force%20replacement%20of%20an%20element/component%20instead%20of%20reusing%20it.

The key attribute generally does this in vuejs already. So I'm looking to add an key attribute on the vue component but I'm not able to add it to component as ngVue doesn't allow me to add special attributes on vue component. The HTML attributes are being passed to component.

[jaredmcateer]

Ah yea ngVue doesn't support this behaviour. If you need to use a loop ngRepeat's tracking should rerender it. If you're not using a loop you'll need to do something to force recompile the directive (e.g., using an ngIf). A somewhat more inefficient approach you could wrap the component with one that takes the key as a prop and sets the :key on your target component.

I would gladly accept a PR if you want to add this functionality into ngVue.