What is the best way to program button behavior?

Question

Vue.js

Good evening.
Getting into Vue.
Fiddle on the issue: https://jsfiddle.net/3hoejbz0/
1) There is a login form
2) There is a button that, when clicked, sends an xhr request with a login-password (using axios). While we are waiting for the request, the button should change its state to disabled, and instead of the text on the button, there should be an fa-spinner.
3) For training, I made such a button-freeze component - so that it can be used in different places of the project, where xhr will also be used (is this the right solution?)
4) How to call the parent method correctly and, most importantly, how to return the button to its original state at the end of the xhr request
Guru, point to the right path

Answer 1

Use the submit type on the button if you want to submit the form on click, and listen for the @submit.prevent event on the form itself (so the browser will validate) . prevent prevents the browser from executing the default event (sending a get request).
And in the button, make props loading and change the value, before submitting the form, and after receiving a response from the server

Answer 2

The "true" way in my understanding is through writing a wrapper component that will transparently proxy input parameters and event handlers to the button itself.
How to do this is well described here: https://youtu.be/7lpemgMhi0k?t=1313