Custom highlight doesn't seem to work

[JPortegijs]

I'm trying to highlight the current date.

<template>
  <div class="datepicker-field">
    <DatePicker
      v-model="date"
      :value="date"
      :popover="popover"
      :attributes="attributes"
      :masks="masks"
      locale="nl"
      @input="pick"
    >
      <template v-slot="{ inputValue, inputEvents }">
        <label :for="id" class="sr-only">Datepicker</label>
        <input
          :id="id"
          :value="inputValue"
          type="text"
          class="form-control"
          readonly
          v-on="inputEvents"
        >
      </template>
    </DatePicker>

    <Icon name="calendar" />
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import DatePicker from 'v-calendar/lib/components/date-picker.umd';
import Icon from '@/vue/components/Icon.vue';

export default {
  components: {
    DatePicker,
    Icon,
  },

  props: {
    initialDate: {
      type: Date,
      required: false,
      default: () => new Date(),
    },
  },

  data() {
    return {
      id: `datepicker-${uuidv4()}`,
      date: this.initialDate,
      popover: {
        visibility: 'focus',
        keepVisibleOnInput: false,
      },
      attributes: [{
        type: Array,
        default: () => [{
          highlight: {
            borderColor: '#ff6666',
            borderWidth: '1px',
            borderStyle: 'solid',
          },
          dates: new Date(),
        }],
      }],
      masks: {
        input: 'DD MMMM YYYY',
      },
    };
  },

  methods: {
    pick() {
      this.$emit('pick', this.date);
    },
  },
};
</script>

But the date of today (15th of Februari) has not changed:

Would love some help.

[nathanreyes]

Your highlight properties need to be nested within a style object.

highlight: {
  style: {
    borderColor: '#ff6666',
    borderWidth: '1px',
    borderStyle: 'solid',
  },
}

Let me know if that works out.