JSX is a dsl, like typescript or flow, it doesn’t change or affect your code, all assumptions stand, it doesn’t break scope. Vue templates are not a dsl, they break all assumptions and your scope. There is no difference between Vue and angular in that regard, both could not do this with templates:

    const A = () => <div />
    const B = () => <A />

JSX turns that into:

    const A = () => createElement('div')
    const B = () => createElement(A)

That is all that JSX does. Vue on the otherhand parses its own language, breaks scope, separates concerns that shouldn’t be separated and in the end joins them via dependency injection again. We’ve been through this years before Vue existed with angular and others.

BTW, your info is outdated. "class" is allowed in React as of V16.