[Vuejs]-Component lifecycle hook beforeDestroy gets called on new component creation using v-for

The solution was actually quite simple. I was looping over a dynamic component so I had to use keep alive around it like:
<keep-alive> <component :is="view"></component> </keep-alive>
This ensures that it caches the inactive component instances without destroying them.

VueJS Keep alive