Vuetify-carousel height adjusted when device is rotated using breakpoints, v-carousel-item height updated until the page is refreshed

Question

The carousel height is updated to keep the aspect ration when the device is rotated using breakpoints.

The carousel height is updated but the carousel item height stays the same until the page is refreshed.

I had been trying to update the height of the class v-window__container and v-carousel__item that seem to be the classes containing the images for the carousel but I am not able to update them with js.

 computed: {
     carouselHeight () {
          switch (this.$vuetify.breakpoint.name) {
            case 'xs' : return '198'
            case 'sm' : return '375'
            case 'md' : return '520'
            case 'lg' : return '620'
            case 'xl' : return '1020'
          }

        }

https://codepen.io/waco/full/XoBRJp

I tried updating the classes as well

 computed: {
     carouselHeight () {
          switch (this.$vuetify.breakpoint.name) {
            case 'xs' : 
                document.getElementsByClassName('v-window__container').height = '198px';
                return '198';
            case 'sm' : 
                document.getElementsByClassName('v-window__container').height = '375px';
                return '375'
            case 'md' : return '520'
            case 'lg' : return '620'
            case 'xl' : return '1020'
          }

        }

I expect the carousel image updates as well when the device is rotated without refreshing the page.

Answer 1

I managed to make it work with this workaround using JQuery to change the height of the carousel Item.

computed: {        
    carouselHeight () {

        var x = document.getElementsByClassName("v-window__container");

        switch (this.$vuetify.breakpoint.name) {

            case 'xs' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "198px"}) }                    
                return '198px';

            case 'sm' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "375px"}) }
                return '375px';

            case 'md' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "520px"}) }
                return '520px';

            case 'lg' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "620px"}) }                            
                return '620px';

            case 'xl' : 

                if (x.length > 0) { $(".v-carousel__item").css({"height" : "1020px"}) }    
                return '1020px';
        }                                     
    }