Nobody responded to you, so I took on your challenge :) I'm still pretty new to Vue, but after a while of fiddling I came to a pretty simple solution: https://jsfiddle.net/jsfiddle4ephi/6xLwgqxk/1/
IMO, this is more readable than React, especially if extracted to their own .vue components.
1. Upon a successful resolve, you can make it render props/data to a custom component.
Nice try, but I expect that the template is contained within the app template (or really any other template), i.e. `<spinner promise=promise> <inner template parameterized on data here></spinner>`. I don't want to be passing raw html strings around.
I'm sure vue has some scoped slot template transclusion thing to solve it... actually scratch that, I'm not sure if the equivalent of plain old first class functions exist in its template language :)
Its not just about raw HTML: this might need to be a totally custom template with data bindings to other data. Here is an example, the spinner's promise provides the data for a dropdown component which in turn is bound to a member of the parent component's data.
The challenge does need some more work to make it more realistic :)
IMO, this is more readable than React, especially if extracted to their own .vue components.
1. Upon a successful resolve, you can make it render props/data to a custom component.
2. You can put each of the component into their own vue files to make it super clean: https://vuejs.org/v2/guide/single-file-components.html
This was a fun challenge, thanks!