[unsoundInput]

What bothers me about this and other templating is that branching is so inconspicuous and therefore hides its complexity . Lets takes this extended example:

  <template>
  <div>
      <h2 class="c-section-heading">HELLO</h2>
      <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
      <p v-if="location.query.home">You specified a home query: {{location.query.home}}</p>
      <a v-else v-on:click="specifyHomeQuery" class="u-warn">No home query was specified</a>
  </div>
  </template>

And compare it to:

  <template>
  <div>
      <h2 class="c-section-heading">HELLO</h2>
      <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
      <p>You specified a home query: {{location.query.home}}</p>
      <a v-on:click="specifyHomeQuery" class="u-warn">No home query was specified</a>
  </div>
  </template>

The first one creates a div with 3 children with the type of the last one depending on the condition. The second one creates a div with 4 children (and a warning in the dev console). Both have 4 lines between the <div> with the same content except for two attributes on two elements and are indented the same by convention of the framework. They look nearly identical when quickly parsing over them but results are very different.

Compare this to the other react solutions, or my personal favorite:

  const Home = ({location}) => <div>
      <h2 className="c-section-heading">HELLO</h2>
      <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
      {location.query.home
    	  ? <p>You specified a home query: {location.query.home}</p>
          : <a onClick={specifyHomeQuery} className="u-warn">No home query was specified.</a>}
  </div>

I think it's pretty clear which "templating system" better represents the fact that this has more complexity than just a simple, linear component.