Computed property reactive to window.innerwidth in VueJS

Add an eventlistener to the window like so:

new Vue({
  el: "#app",
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
    })
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768
    }
  }
})

Computed properties are only updated when their depedencies change, therefore here isMobile won't be reactive.

An other possibily is to use Vuetify:

computed: {
  isMobile() {
    return this.$vuetify.breakpoint.smAndDown
  },
},

src: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service-object