Each Vue component is a JavaScript object that has a render function. This render function is called when it is time to render it in the HTML DOM. A single file component is an abstraction of this object.
When we are declaring that our component has unique props that can be passed, it opens a tiny door for other components or JavaScript to place information inside our component. We are then able to use those values inside our component to render data, do some calculations, or make visual rules.
In our case, using the single file component, we are passing those rules as HTML attributes because vue-template-compiler will take those attributes and transform them into JavaScript objects.
When those values are passed to our component, Vue first checks whether the passed attribute matches the correct type, and then we execute our validation function on top of each value to see whether it matches what we'd expect.
After all of this is done, the component life cycle continues...