Our frontend application was originally built with Rails. When we added Vue, we did not refactor our entire code base.
This means that we've kept the existing server rendered pages. Once the page is rendered we build our vue app on top of it.
The reasons why we pass certain data through HTML is: 1 - Avoid duplication. Our endpoints and paths are still built in rails, by passing them through data attributes we keep only one single source of truth 2 - Passing data from the server to the Vue App Some data is not being sent through the API, but we still need to access it. For those cases we also use the data attributes.
We know that this is not ideal but it was a mid term solution that allowed us to quickly add Vue.
You can read more about our architecture with Vue in this blog post: https://about.gitlab.com/2017/06/29/gitlab-at-vue-conf/
This "hurr jQuery and everything it brought sucks" mentality is not good.
Put a function on the vue component that will make a request, keep all the data stuff in vue.
React for example wrecks your HTML with react related attributes on every DOM element.
There is nothing wrong with storing some information in the DOM.
Except you're coupling your application state with the document model. If you ever do anything to change the DOM later on, (like installing React into your codebase) it'll come back to bite you in the ass hard, as now you need to find a means to communicate state that you just threw into the DOM like it were a slightly more acceptable global variable.
E.g. on the server-side .html.erb they'd have something like
`<div... data-endpoint="@controller.url">...</div>`