Vue material datepicker changing format after clearing the date

Question

I have a DatePicker component like so:

<div class="date-picker">
   <md-datepicker v-model="monthStart" md-immediately>
      <label>From</label>
   </md-datepicker>
</div>

With monthStart being defined like this:

data() {
    return {
      monthStart: moment()
        .startOf("month")
        .format("YYYY-MM-DD"),

Now when I first open the page the DatePicker is defaulted to 2020-11-01, and if I trigger a method using monthStart it sends 2020-11-01 in the request. This also works fine if I change the date in the DatePicker without doing anything else. However, if I first X out the date so the DatePicker is blank, and THEN select a new date, it still says 2020-11-01 in the DatePicker field, but when I trigger the method the date that gets sent in the request says Wed Nov 11 2020 00:00:00 GMT+0100. How can I set the format for the DatePicker so that the date I select is always of the format "YYYY-MM-DD"?

Answer 1

The answer was simply to add :md-model-type="String" to the DatePicker as described on the bottom of the docs (https://vuematerial.io/components/datepicker/):

   <div class="date-picker">
       <md-datepicker v-model="monthStart" md-immediately :md-model-type="String">
          <label>From</label>
       </md-datepicker>
    </div>