How to Use v-date-picker with range props from vuetify

I already read documentation several time about v-date-picker and I think what I want to use is one of these feature, v-date-picker with range props. But I don't know why I can't seem to implement it in my project. there is several error that I found such as:

1. [Vue warn]: Error in data(): "TypeError: dateString.split is not a function" I read some answer in here: using-new-date-with-v-date-picker-doesnt-work but it still not solve my problem
2. Error in render: "TypeError: dateString.trim is not a function"

this is my current progress:

for information I'm using vuetify: "^1.5.16" for my project. this is the example of my code:

<template>
 <div>
  <v-date-picker v-model="dates" range></v-date-picker>
  <v-text-field v-model="dateRangeText" label="Date range" prepend-icon="event" readonly></v-text-field>
  model: {{ dates }}
 <div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      loading: true,
      dates: ['2019-09-10', '2019-09-20']
    };
  },

  computed: {
    token() {
        return this.$store.state.auth.token;
    },
    dateRangeText () {
      return this.dates.join(' ~ ')
    },
  },
}
</script>

in fact I just follow the step in Here can someone help me to solve this? I'm confused about this v-date-picker with range props problem.

Just for reference, I already tried this but it still failed:

1. how-to-display-a-fixed-vuetify-v-date-picker-range

I follow this answer but this is what I got:

I change my dates to: dates: [new Date('2019-09-10').toJSON(), new Date('2019-09-20').toJSON()], and the error is still there. can someone help me to solve this?