Nuxt.JS не отображает блоки, как мне нужно

Я создаю веб-приложение Nuxt.js SSR, и у меня возникает странная проблема.

<div class = "container" @mouseenter = "hovered = true" @mouseleave = "hovered = false">
  <transition name = "fade">
    <div class = "class1" v-show = "!hovered && isDesktop">blank_1</div>
  </transition>
  <transition name='scale'>
    <div class = "class2" v-show = "hovered || !isDesktop">blank_2</div>
   </transition>
</div>

<script>
export default {
  data() {
    return {
      hovered: false
    }
  },
  computed: {
    isDesktop() {
      if (process.client) {             
        window.screen.width > 1024 ? return true : return false
      }
    }
  }
}
</script>

<style>
.class1 {
  height: 100px;
  width: 100px;
  background-color: red;
}
.class2 {
  height: 100px;
  width: 100px;
  background-color: blue;
}
</style>

Я объясню это несколькими шагами.

1. Позвольте мне объяснить, как это должно работать:
   • Div с class = "class1" по умолчанию должен отображаться на рабочем столе и исчезать при наведении курсора на контейнер. На мобильном устройстве его нужно скрывать каждый раз.
   • Div с class = "class2" должен быть скрыт на рабочем столе и появляться при наведении курсора на контейнер. На мобильном устройстве он должен отображаться каждый раз.
2. Позвольте мне объяснить, как это работает сейчас:
   1. Рабочий стол:
      • Div с class = "class1" не отображается, пока я не наведу контейнер один раз, а затем работает должным образом
      • Div с class = "class2" работает как надо.
   2. Мобильный:
      • Div с class = "class1" работает как надо.
      • Div с class = "class2" работает как надо.
3. Как я это исправил:
   • После нескольких часов попыток я просто понял, что могу переписать v-show на первом div на v-show = "!hovered" и установить медиа-запрос на экране мобильного display:none;. Итак, я исправил единственную проблему с рабочим столом, которая у меня была.

Но почему это так работает, когда у меня v-show = "!hovered && isDesktop"? Я предположил, что первая загрузка Nuxt.JS идет на сервер, поэтому isDesktop возвращается как неопределенный, поэтому v-show = "!hovered && isDesktop" превращается в v-show = "!false && undefined". Но тогда почему вторая директива div v-show: v-show = "hovered || !isDesktop" работает нормально, если она должна превратиться в v-show = "false || !undefined", но у меня все еще есть этот div скрыто на рабочем столе и отображается на мобильном телефоне.

P.S. Это мой первый вопрос по StackOverflow, извините, если я плохо стилизовал код, я не понимаю, как это работает. Спасибо за ответы.