Editing date and updating it in FireBase with vue.js , vuex? - firebase

Question

I'm a beginner in writing vue js. I want to edit an exiting date in the app am working on based on a tutorial video am watching and the new date should be updated both in the app and Firebase when the SAVE button is clicked.
Am getting an error this which i think is not allowing the v-dialog to show but when i change the v-model in the v-date-picker to date which is included in my data as
props: ['meetup'],
data () {
return {
editDialog: false,
editableDate: null,
date: new Date().toISOString().substr(0,10)
}
}
the v-dialog works with no error but i get this error when the v-model is changed from date to editableDate:
vue.runtime.esm.js?ff9b:587 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, got Date.
vue.runtime.esm.js?ff9b:587 [Vue warn]: Error in data(): "TypeError: dateString.split is not a function"
vue.runtime.esm.js?ff9b:1737 TypeError: dateString.split is not a function
vue.runtime.esm.js?ff9b:587 [Vue warn]: Error in nextTick: "TypeError: Cannot set property 'isDark' of undefined"
TypeError: Cannot set property 'isDark' of undefined
<template>
<v-dialog width="350px" persistent v-model="editDialog" ref="dialog" lazy full-width>
<v-btn accent slot="activator">
Edit Date
</v-btn>
<v-card>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-card-title>Edit Meetup Date</v-card-title>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12>
<v-date-picker v-model="editableDate" style="width: 100%" actions>
<v-spacer></v-spacer>
<template slot-scope="{save, cancel}">
<v-btn
class="blue--text darken-1"
flat
#click.native="editDialog = false">
Close
</v-btn>
<v-btn
class="blue--text darken-1"
flat
#click.native="onSaveChanges">
Save
</v-btn>
</template>
</v-date-picker>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-dialog>
</template>
scripts
<script>
export default {
props: ['meetup'],
data () {
return {
editDialog: false,
editableDate: null
}
},
methods: {
onSaveChanges () {
const newDate = new Date(this.meetup.date)
const newDay = new Date(this.editableDate).getUTCDate()
const newMonth = new Date(this.editableDate).getUTCMonth()
const newYear = new Date(this.editableDate).getUTCFullYear()
newDate.setUTCDate(newDay)
newDate.setUTCMonth(newMonth)
newDate.setUTCFullYear(newYear)
this.$store.dispatch('updateMeetupData', {
id: this.meetup.id,
date: newDate
})
}
},
created () {
this.editableDate = new Date(this.meetup.date)
}
}
</script>
Have tried all i could but to no avail please i need help
This is my store
updateMeetupData ({commit}, payload) {
commit('setLoading', true)
const updateObj = {}
if (payload.title) {
updateObj.title = payload.title
}
if (payload.description) {
updateObj.description = payload.description
}
if (payload.date) {
updateObj.date = payload.date
}
firebase.database().ref('meetups').child(payload.id).update(updateObj)
.then(() => {
commit('setLoading', false)
commit('updateMeetup', payload)
})
.catch(error => {
console.log(error)
commit('setLoading', false)
})
},