breakpoints programatically in vue

responsive.vue

<script>
  export default {
    data: () => ({
      // Create a reactive data property to track
      // whether the user is on a mobile device
      isMobile: false,
    }),

    beforeDestroy () {
      if (typeof window !== 'undefined') {
        // Remove the resize event when the component is destroyed
        window.removeEventListener('resize', this.onResize, { passive: true })
      }
    },

    mounted () {
      // Check whether the user's device is mobile or not
      this.onResize()
      // Create resize event to check for mobile device
      window.addEventListener('resize', this.onResize, { passive: true })
    },

    methods: {
      onResize () {
        // Set reactive data property to true
        // if device is less than 600 pixels
        this.isMobile = window.innerWidth < 600
      },
    },
  }
</script>