Hey Andrei!
I don't have any clean code examples easily handy, but let me work on it for you. Shoot me an email (email is in my profile) and i'll share a gist with you.
The tl;dr is:
[0] Use single file components
[1] API endpoints return JSON. Nothing super fancy, just taking rails objects and return JSON.
[2] What would have been a rails "view" corresponds with a route in my vue-router config. Nothing special there either.
[3] A top level page (think /index or /item)
[4] Each top level page calls a private endpoint, which is just its own natural route in the browser, and pulls down data it cares about through the JSON request. Each json object corresponds with an ES6 class which wraps any object specific logic (usually end up having to dupe some code between ruby + js here).
[5] Each top level page is broken down into components (widgets, major sections of the page), for code clarity.
[6] Anytime I find myself doing a for-each loop, I usually look to see if whatever the sub element is should be its own component. Usually the answer is yes (just depends on whether it has its own independent logic).
Everything is passed top down as an object, but I do break the "cardinal sin" of mutating props on the object. Traditionally, props should be immutable in Vue, which requires use of Vuex or an event bus to change state. I haven't had a case yet where this has been an issue, likely because each page transition reloads whatever data it needs, and the same object isn't being mutated by multiple components in a way that would cause debugging nightmares.
A few patterns I use to keep myself sane are wrapping objects with their own save methods (so I can just .save() ) an object and persist it back to the server.
I dunno, probably a lot more there, but I haven't given this any deep thought. Reach out, and let's exchange thoughts!