Exemplo template .vue

template.html

<template lang="html">
  <!-- Date -->
  <div class="component date" @dblclick="modalShow">
    <div :class="klass">
      <label :class="metadata.labelClass" :for="name">
        {{metadata.label}}
      </label>
      <div class="form-group date" v-if="metadata.type === 'text'">
        <input type="text"
          :class="metadata.cssClass"
          :title="metadata.hint"
          :value="metadata.predefinedValue"
          :id="name"
          :required="metadata.required"
          :disabled="metadata.disabled">
      </div>
      <div class="input-group date" v-if="metadata.type === 'component'">
        <input type="text"
          :class="metadata.cssClass"
          :title="metadata.hint"
          :value="metadata.predefinedValue"
          :id="name"
          :required="metadata.required"
          :disabled="metadata.disabled">
        <span class="input-group-addon">
          <i class="glyphicon glyphicon-th"></i>
        </span>
      </div>
      <div class="input-daterange input-group" v-if="metadata.type === 'range'">
        <input type="text"
          :class="metadata.cssClass"
          :name="name + '_start'"
          :id="name"/>
        <span class="input-group-addon">até</span>
        <input type="text"
          :class="metadata.cssClass"
          :name="name + '_end'"
          :id="name + '_range'"/>
      </div>
      <p class="help-block" v-if="metadata.helpText !== ''">
        {{metadata.helpText}}
      </p>
    </div>
    <modal :metadata="metadata" :id="id" />
  </div>
</template>