useDisplay() attribute update?

[Picturk]

Use case:
Given a simple navigation interface with 1 link. The link is a v-btn component. The v-btn size attribute is set based on the screen resolution of the device: size="small" on tablets, size="x-large" on desktops.

When the page loads the computed property doesn't get updated in the v-btn component.
Updates when you manually resize the browser window.

I've used the useDisplay() method to evaluate screen size within a computed property which is passed as an attributed in the template.
useDisplay() works, computed property works, v-btn size attribute doesn't. What am I missing? Does anyone know how to resolve the issue?

The desired behaviour is:
Given the page loads, useDisplay() method returns the screen size, updates the computed property which is passed to v-btn and correctly renders the button at the correct size.

(Apologies if this should be posted elsewhere)

<template>
  <v-btn :size="btnSize">About Us</v-btn>
</template>

<script>

  setup() {
    const { name } = useDisplay()

    const btnSize = computed(() => {
      switch (name.value) {
        case 'xs':
          return 'default'
        case 'sm':
          return 'x-small'
        case 'md':
          return 'small'
        case 'lg':
          return 'default'
        case 'xl':
          return 'large'
        case 'xxl':
          return 'x-large'
        default:
          return 'default'
      }
    })

return { btnSize }

</script>

Actual

using useDisplay() method