Forcing Vue component to re-render

Question

So this must sound a bit strange, but I made a Vue application that acts as a documentation for our main application built in angular. One of the things I want the documentation to do is display some of our simple angular components (the code along with how that component is rendered).

I am using Vue-router which is successfully allowing me to route a bunch of different sections. I placed <my-angular-component></my-angular-component> within one of my Vue templates, and after including Angular in my page, the angular component actually renders correctly. However, it only renders correctly assuming I refresh the browser and on first page render. Once I use the router-view to go to some other route and then back to the initial one, the angular component no longer is rendered.

Anyone have any clues how I can tell the Angular on the page to re-render my angular component anytime I am looking at it?

Answer 1

If the angular component is inside a vue component, you can manually compile it using $compile and insert it to where you want it to be in the mounted hook. This way the angular component is re-rendered every time the vue component is created. You may also need to clean it up in beforeDestroy hook (calling $scope.$destroy()).

It's probably not worth the trouble to mix these two frameworks.