how to use window.innerWidth inside computed Property - Nuxtjs

Question

am working on a Vue.js/nuxt.js project, where I need to determine styles within the computed Property and apply on a div based on screen size, as in the example below:

<template>
  <div :style="css"></div>
</template>

<script>
export default {
  computed: {
    css () {
      let width = window.innerWidth

      // ... mobile { ... styles }
      // ... desktop { ... styles }

      // ... if width is less than 700, return mobile
      // ... if width greater than 700, return desktop
    }
  }
}
</script>

It doesn’t work, it makes a mistake windows is note defined

in Nuxt.js, the window will only be available within the mounted, which is life cycle hook where the screen has already been rendered, which makes total sense.

I could put all this style logic inside a method and call on the Mounted, or put directly on the Mounted and apply on the div, the problem is that the style will be applied with a certain delay after the page is mounted.

Then how can I know the size of the page’s internal width inside the computed Property?