Vue 3 Input Field Reactivity Between Parent-Child Components

Sometimes we need to move an input field that is bound to a reactive variable from a parent component to its own component for reusability purposes without losing its reactivity.

In the below parent component, the input field is bound to a variable name using ref() object.