Vue.js date range picker with multiples ranges and presets

npm install vue-mj-daterangepicker
yarn add vue-mj-daterangepicker

import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-datepicker/dist/vue-mj-datepicker.css'

...

Vue.use(DateRangePicker)

theme = {
  primary: '#3297DB',
  secondary: '#2D3E50',
  ternary: '#93A0BD',
  border: '#e6e6e6',
  light: '#ffffff',
  dark: '#000000',
  hovers: {
    day: '#CCC',
    range: '#e6e6e6'
  }
}

{
  to: '2019-04-23T10:26:00.996Z',
  from: '2018-04-23T10:26:00.996Z'
  panel: 'range'
}

<template>
  <date-range-picker :from="$route.query.from" :to="$route.query.to" :panel="$route.query.panel" @update="update"/>
</template>

<script>

export default {
  methods: {
    update(values) {
      this.$router.push({ query: Object.assign({}, this.$route.query, {
        to: values.to,
        from: values.from,
        panel: values.panel
      }) })
    }
  }
}
</script>