In my opinion, the Page API quickly becomes a tangling mess a jquery code. Feels like going 20 years back…
I hope they integrate Frappe-UI soon enough in ERPNext. The app they build with it looks super slick: GitHub - frappe/desk: Customer Service Software. I wish there was a getting-started tutorial to build something like this.
Ok, back on the subject 
I would suggest you look into creating a ‘dummy’ Single Doctype, then create a Child Table, and fill the child table on load of the form with whatever query you want. Then hide the save button of the form. ERPNext is using this technique, you can check Quick Stock Balance which is defined as a single doctype only to help building the UI form (from my understanding).
Another option would be to add an HTML field to the Single Doctype, and load a Vue component inside it. You can get some guidance how to do this here: Vue component inside from html field