Vue.js date off by one

Question

My code in its most basic form on JSBin.

I have dates stored as YYYY-MM-DD hh:mm:ss that need to be displayed as MM/DD/YYYY and edited as YYYY-MM-DD, as that's what HTML's date input requires. Everything seemingly works, except the first time I modify the day, the reflected date is one day earlier. Subsequent changes are thus one off.

Initial state:

First change:

Any subsequent change:

Answer 1

I extracted the utc dates then was able to get the date working without it being off by one day.

Something similar to:

<input
          type="date"
          name="startDate"
          :value="startDate && startDate.toISOString().split('T')[0]"
          @input="startDate = getDateClean($event.target.valueAsDate)"
          autocomplete="off"
          class="form-control"
        />

method:{
  getDateClean(currDate: Date) {
  // need to convert to UTC to get working input filter
  console.log(currDate);
  let month: number | string = currDate.getUTCMonth() + 1;
  if (month < 10) month = "0" + month;
  let day: number | string = currDate.getUTCDate();
  if (day < 10) day = "0" + day;
  const dateStr =
    currDate.getUTCFullYear() + "-" + month + "-" + day + "T00:00:00";
  console.log(dateStr);
  const d = new Date(dateStr);
  console.log(d);
  return d;
  }
}

See running example from answer in https://stackoverflow.com/a/63838211/2875452;