<div id="app">
<v-app><v-container>
  

              <v-menu
              lazy
              :close-on-content-click="true"
              v-model="menu"
              transition="v-scale-transition"
              offset-y
            >
              <v-text-field
                required
                slot="activator"
                label="Date"
                v-model="formatted"
              ></v-text-field>
        <v-date-picker
                       no-title
          v-model="picker"
          :date-format="date => new Date(date).toDateString()"
          :formatted-value.sync="formatted"
        ></v-date-picker>
            </v-menu>

        <table class="table text-xs-left" style="width: 300px;">
          <tbody>
            <tr>
              <th>Original</th>
              <td>
                <strong>{{ picker || "No date" }}</strong>
              </td>
            </tr>
            <tr>
              <th>Formatted</th>
              <td>
                <strong>{{ formatted || "No date" }}</strong>
              </td>
            </tr>
          </tbody>
        </table>

  </v-container>
</v-app>
</div>

new Vue({
  el: '#app',
  
  data() {
    return {
      menu: '',
      picker: '',
      formatted: '',
    };
  },

})