I agree that this is one of the most useful things that you can do and one of the most commonly overlooked for whatever reason. I can't underestimate the number of times I've worked with someone who is looking in seemingly random places to solve an error instead of tracing backwards from the error message in front of their face.
I spend a good amount a time answering questions in the Vue StackOverflow tags. While this is documented, it's nevertheless something a huge amount of people stumble over. I'd say the change detection caveats are right behind "this" issues (which isn't really a Vue issue, just javascript) in terms of the most common problems I see in Vue code.
Vue templates are compiled into render functions. They are checked when the template is compiled. If you are using a build process, then that would be at build time.
1. The MobX-like functionality is moreso simply a native feature of Vue. All data values are converted into observed values. A render is triggered by changes to data. I believe Evan himself basically said React + MobX = Vue. Using a render function was just a choice. It could just as easily have been written with a template.
2. Again, this was basically just a choice for the example. The spinner could be defined in a module and imported/registered locally. Codepen/JSFiddle just isn't the greatest place for that kind of example.
3. Scoped slots are a way for a component to expose internal data to elements contained in a slot (content thats contained within the component but defined by it's parent). I agree, its initially one of the more confusing concepts in Vue.