Имя реквизита <NuxtLayout> не реагирует

У меня есть компонент, который должен переключать используемый макет на основе текущей точки останова.

<script setup lang = "ts">
import { computed } from "vue";
import { breakpointsTailwind } from "@vueuse/core";

const breakpoints = useBreakpoints(breakpointsTailwind);

const layoutName = computed(() =>
  breakpoints.smaller("md") ? "sidenav-mobile" : "sidenav-desktop",
);
</script>

<template>
  <div>
    {{ breakpoints.smaller("md") }} <!-- this is reactive -->
    <NuxtLayout :name = "layoutName"> <!-- layoutName is not reactive -->
      <template #links>
        <slot name = "links"></slot>
      </template>
    </NuxtLayout>
  </div>
</template>

При изменении размера окна ниже или выше точки останова мой отладочный вывод {{ breakpoints.smaller("md") }} правильно меняется на true или false, но макет не переключается, пока я не перезагружу его.

Что я делаю не так?