I’m trying to make an adaptive v-container size so that it changes depending on the screen resolution.

I use the Composition API

<template>
    <v-container class="bg-surface-variant">
        <v-row class="mb-6" no-gutters>
            <v-col :cols="cols[0]">
                <v-sheet class="pa-2 ma-2">
                    .v-col-{{ cols[0] }}
                </v-sheet>
            </v-col>

            <v-col :cols="cols[1]">
                <v-sheet class="pa-2 ma-2">
                    .v-col-{{ cols[1] }}
                </v-sheet>
            </v-col>
        </v-row>
    </v-container>

</template>

<script setup>

import { computed } from 'vue';
import { useDisplay } from 'vuetify';

const cols = computed(() => {
    const { lg, sm } = useDisplay();
    return lg ? [3, 9]
        : sm ? [9, 3]
            : [6, 6]
})

</script>

Unfortunately, this code doesn’t work and I don’t understand why(
I tried to rewrite this code using the Options API and everything worked, but for the project I need the Composition API.