how to change a layout dynamically?

[durbanitas]

I need help using this line mentioned in the documentation on how to change a layout dynamically:

export default {
  layout: (ctx) => ctx.$device.isMobile ? 'mobile' : 'default'
}

Tried

index.vue

<script setup>
definePageMeta({
  layout: (ctx) => (ctx.$device.isMobile ? 'mobile' : 'default'),
});
</script>

<template>
  <main>
    ...
  </main>
</template>

Error

vite_ssr_import_6.default[props.name] is not a function

Invalid layout (ctx) => (ctx.$device.isMobile ? 'mobile' : 'default') selected.
[Vue warn]: Invalid prop: type check failed for prop "name". Expected String | Boolean, got Function

Question

Where do I place this? My guess is initalizing as a plugin or to create a middleware...

Goal

• have two seperated layouts: default.vue and mobile.vue