How does reactivity works with ref?

VueJS automatically detects the changes to ref's value and updates the DOM with a dependency-tracking based reactivity system.

1. When a component is rendered for the first time, it tracks every ref that was used during the render.
2. Whenever a ref is mutated, it will trigger a re-render of the component.