Vue2 Vuetify v-resize issue

[johnlwebb3]

Hi.
I am new to Vue and Vuetify and to github. I am having an issue with Vuetify and v-resize and wondering if anyone can help with it.

Basically, I setup a component and assign the onResize method to the v-resize prop. The onResize method is logging the breakpoint name to the console and updating the screenSize data element which updates the UI with a Screen Size Value (xs, sm, md, lg, or xl) through Vue reactivity.

When I drag the browser window and resize it horizontally, everything seems to work unless I make large changes. Like if it is currently reporting xl and I incrementally make the browser more narrow, it seems to detect and change the screen size. But if I skip over lg, & md and make it narrow enough to me sm, the reactivity or something does not work and it just keeps reporting xl in the UI.

Also when I maximize the browser and then normalize it again, I always seem to get the size as it was, not as it is.

Any help on this issue would be appreciated.

I see the same behavior in Chrome and Edge. Have not tried FF.

Here is my Vue component. I tried including it it here with the code <> tags button but it seems to render weird.
Here is a repo. Adding this link with the link button seems to create a link that does not reach the github repo so just copy and past I guess: https://github.com/johnlwebb3/resize-issue

Here is a scrernshot

Thnaks,

John