I'm used to creating controlled components in react using state; however, I'm new to Vue and would like to learn how I could recreate my code from react into something Vue could use. I want the input fields values to be store in a piece of data so that I could do something with them.

I believe that after login is run, it does not make user = to res.data immediately because its asynchronous but the code checks if user exists on mount. Is there a way to have the code check if user changed values sort of like in react with useEffect(() => {}, [user])?
– albert_anthony6May 23 at 16:13

The form controls' state is stored on the data property of the component, and a two-way binding is set up on the controls with the v-model directive. Any changes to the inputs will be synced to the component's state, and vice versa.

Vue provides some handy modifiers when adding event listeners to the template, so by writing @submit.prevent the default submit handler is prevented from firing.

I've created a sandbox example, so you can easily play around with the code and see it in action.

the user is never being stored into session storage because it does not immediately equal the response from login because its async. When mounting happens, it it not yet equal to the response so mounted method returns and no user is stored. That is what I am currently stuck on. I could get around this in React with useEffect because it could run whenever the user value changed. But I need a Vue solution
– albert_anthony6May 23 at 16:40