When we dynamically switch components as a result of a data property or some other reactive state, they’re re-rendered everytime they’re toggled in to render. While you may want this behaviour, there are situations where re-rendering may not be suitable. For instance, you may have a component that brings in data from an API call when created. You may not want to place this API call every time this component is dynamically switched in to render. That is when you can enclose the component within the keep-alive element. The keep-alive element caches the component and fetches it from there instead of re-rendering it every time.
