How to format date in v-Calendar?

Question

I'am trying to get a proper output of date from the v-calendar. Now this looks like:

Fri Jul 31 2020 00:00:00 GMT+0200 (utc summertime) 

This should be 2020-07-28 etc.. I Can't find anything in the documentation that work, anyone know how to change output?

Code:

{{ date }}

<v-date-picker
    v-model="date"
    color="red"
    is-inline
    :available-dates='dates'
    :masks='{ input:["L", "YYYY-MM-DD"] }'
/>

Script for test:

<script>
    var app = new Vue({
        el: "#dic",
        data: {
            date: moment().format('YYYY-MM-DD'),
        },
    });
</script>

Answer 1

Add a computed property called formattedDate based on date and use it and keep the data property :

let app = new Vue({
  el: '#app',
  data: {
    date: moment().format('YYYY-MM-DD'),
  },

  computed: {
    formattedDate() {
      return moment(this.date).format('YYYY-MM-DD')
    }
  }
})

<script src='https://unpkg.com/vue/dist/vue.js'></script>

<script src='https://momentjs.com/downloads/moment.min.js'></script>
<script src='https://unpkg.com/v-calendar'></script>
<div id='app'>
  {{formattedDate }}

  <v-date-picker v-model="date" color="red" is-inline />
</div>