Media Query for component config settings

Is there a way to change the config settings of a component in a media query? I want to change my calendar from being inlined to an input field on mobile devices. So in this following code block, i'de want the inline field to be set to false in my media query.

I'm using this as my date picker: https://flatpickr.js.org/options/

DatePicker Component

<template>
  <div>
    <flat-pickr v-model="date"
                :config="config"
                class="form-control"
                placeholder="Select date"
                name="start_day"
                />
  </div>
</template>

<script>
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';

  export default {
    mounted() {
        console.log('Component mounted.')
        },
      data () {
      return {
        date: null,
        config: {
            // mode: "range",
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d",
           inline: true
            // enableTime: true,

        }
      }
    },
    components: {
      flatPickr
    }
  }
</script>

Media query:

 @media (min-width: 760px) and (max-width: 992px) {


.flatpickr-calendar {
  
}


}