Tip calculator built with Vue and Tailwindcss

The solution is finally done after what feels like an eternity.

The most difficult thing for me was validating the fields and displaying proper errors. The way I went about it was to define a prop that is a function and it would return either a string if there was an error or null otherwise.

If it's an error the field UI would reflect that error while at the same time the field component would emit that error to the parent so that other components would reflect that error as well. Because of this I have to define a validation function for every field each with there own validation logic.

I can't help but feel like the way I'm structuring things is wrong.

If you have a way to structure the validating code or simply an advice please do leave some feedback.

Thanks.