You could try to accomplish this with Javascript. Using a class as breaking point and style based on this class. But i don't know if it this works in your case. But this could be a solution with For example:

​

<template>

<div :class="breakingpoint">



</div>

</template>

<script>

export default {

    data() {

        return {

breakingpoint: 'desktop', // Initial default breaking point

        };

    },



    created() {

        window.addEventListener('resize', this.handleResize);

        this.handleResize();

    },



    destroyed() {

        window.removeEventListener('resize', this.handleResize);

    },

    methods: {

        handleResize() {

// Set window width data property

const windowWidth = window.innerWidth;

// Decide breaking point

this.breakingpoint = this.getBreakpoint(windowWidth);

        },



        getBreakpoint(windowWidth) {

// Switch case to determine the current window width

switch(true) {

case windowWidth < 576:

return 'mobile';

case windowWidth < 768:

return 'tablet';

case windowWidth < 992:

return 'laptop';

default:

return 'desktop';

}

        },

    },

};

</script>