disable-devtool package not updating ref values after route navigation

I am using Vue 3 in my application and have implemented the disable-devtool package to detect when the browser’s developer tools are opened or closed. Everything works fine when I first load the component. However, when the user is redirected away and then navigates back to this component, ref values such as isDevToolsOpen and counter don’t update anymore, even though no errors are thrown. It’s as if Vue stops tracking the changes in these ref variables after the route change.

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import DisableDevtool from 'disable-devtool'
import router from '@/router'
import { useCreateLog } from '@/composables/controls/useCreateLog'

const isDevToolsOpen = ref(false)
let devToolsTimeout = null
let isLogged = false
const counter = ref(0)

const { createLog } = useCreateLog()

DisableDevtool({
  ondevtoolopen: () => {
    isDevToolsOpen.value = true
    counter.value++
    if (!isLogged) {
      createLog('Developer tools opened')
      isLogged = true
    }
    if (!devToolsTimeout) {
      devToolsTimeout = setTimeout(() => {
        router.push({ name: 'ProductList' })
      }, 5000)
    }
  }
})

onMounted(() => {
  DisableDevtool.isSuspend = false
})

onUnmounted(() => {
  DisableDevtool.isSuspend = true
})
</script>

DisableDevtool is a singleton that doesn't have API for clean-up except isRunning. Suspending it will prevent the component from reinitializing it when it's mounted again and will cause memory leak. It's supposed to either be used in a place that isn't unmounted (root component or global store), or force reinitialization:

onMounted(() => {
  DisableDevtool({
    ondevtoolopen: () => ...
  });
})

onUnmounted(() => {
  DisableDevtool.isRunning = false;
  DisableDevtool({
    ondevtoolopen: null
  });
  DisableDevtool.isRunning = false;
})