Vuelidate: setting $model does not update component

Question

Given the following Vue component that uses Vuetify and Vuelidate:

<template>
    <div id="app">
        <v-date-picker v-model="$v.picker.$model"></v-date-picker>
    </div>
</template>

<script>
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { required } from 'vuelidate/lib/validators'

Vue.use(Vuetify)

new Vue({
  el: "#app",
  data() {
    return {
      picker: new Date().toISOString().substr(0, 10)
    };
  },
  validations: {
    picker: {
      required
    }
  }
});
</script>

I would like to programmatically change the value of this.picker. I tried both changing the v-model as well as the Vuelidate $model:

this.picker = new Date().toISOString().substr(0, 10)

and

this.$v.picker.$model = new Date().toISOString().substr(0, 10))

Neither of them caused a change in the UI nor produced an error message.

How can I programmatically update the DatePicker's value?

Answer 1

Try just assigning v-model to picker instead of $v.picker.$model.

You said you tried changing v-model, but this should work.

<v-date-picker v-model="picker"></v-date-picker>