Vuetify navigation-drawer triggering window resize event even after applying disable-resize-watcher

Question

Vuetify navigation-drawer open/close action is triggering window.onresize event which is causing problems for this flow I am trying,

I am trying to auto-close the navigation-drawer when the browser is resized and its width goes less than 1000px, which works perfectly,

but then if a user try to open the navigation-drawer when the window size is < 1000px it quickly closes that again because the opening/closing of the navigation-drawer action is triggering the window resize event, which triggers the resize handler that is closing the navigation-drawer

how do we stop that, I tried disable-resize-watcher in navigation-drawer but that doesn't seem to work,

Can we disable the window resize event emitter on navigation-drawer open/close actions?

below is App.vue code and here is the video output where I have replicated this issue https://www.loom.com/share/31cfd8b7b3904418b9f4b4a3c90e43b6

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <v-spacer></v-spacer>

      <v-btn
        text
        @click="drawer=!drawer"
      >
        <span class="mr-2">Sidebar test</span>
        <v-icon>mdi-format-align-justify</v-icon>
      </v-btn>
      
  

    </v-app-bar>
    <v-main>
    

  <v-navigation-drawer
      absolute
      disable-resize-watcher
      right
      v-model="drawer"
    >
      <template v-slot:prepend>
        <v-list-item two-line>
          <v-list-item-avatar>
            <img src="https://randomuser.me/api/portraits/women/81.jpg">
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>Jane Smith
              <v-icon class="float-right" @click="drawer=!drawer">mdi-close</v-icon>
            </v-list-item-title>
            <v-list-item-subtitle>Logged In</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>

      <v-divider></v-divider>

    </v-navigation-drawer>

    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  components: {
  },

  data: () => ({
    drawer:false,

  }),
  methods:{
    handleResize(){
      console.log('window width',window.outerWidth);
      if(window.outerWidth <1000){
        this.drawer = false
      }
    }
  },
  created(){
    window.onresize = this.handleResize;
    // window.addEventListener('resize',this.handleResize);
  },
  destroyed(){
    window.removeEventListener('resize',()=>{})
  }
};
</script>

I am using the following version of Vue2 and Vuetify2

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuetify": "^2.6.10"
  }