1) v-if is not html. In html if you see <h3 ...> you immediately think, "there's a level-3 header element here". The thought "there's a level-3 header element here if..." is something new you have to learn for Vue.

2) Shorter is not always easier. For example, using quotes to delimit logical expressions makes it easy to make errors. See the misplaced quote here?

  <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>

> separation of html and js

That's the thing. You do not really separate js and HTML.

There's a weird extension to HTML. There-are JS-like expressions, JS expressions and bindings to outside JS code

It's also neither shoryer to write nor easier to read.