javascript - テンプレートまたはウォッチャーから呼び出すと、このスコープが変更されるのはなぜですか?

Question

すべてのコードを含む私の以前の質問に関して、なぜこれがうまくいくのか疑問に思っています:

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

<script>
import { defineComponent, ref, watch } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const miniState = ref(true)

    function setMiniState(state) {
      console.log('setMiniState widht is ', this.$q.screen.width)
    }

    return {
      miniState, setMiniState
    }
  }
})

しかし、これはしません:

    function setMiniState(state) {
      console.log('setMiniState widht is ', this.$q.screen.width)
    }

    watch('$q.screen.width', () => setMiniState())

ウォッチャーが呼び出されると変数$qがundefinedになりますが、同じ関数がテンプレートから呼び出される場合はそうではありません。関数が呼び出されるthis方法でスコープが変更されているようです。setMiniState

回避策 1

setMiniState引数widthが利用可能かどうか関数をチェックインします。

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

function setMiniState(state, width) {
  let screenWidth = ''
  if (!width) {
    screenWidth = this.$q.screen.width
  } else {
    screenWidth = width
  }
  console.log('setMiniState this is ', screenWidth)
}

watch('$q.screen.width', (width) => setMiniState(undefined, width))

回避策 2

常に引数stateを送信:width

<template>
  <q-drawer
    @mouseover="setMiniState(false, $q.screen.width)"
    @mouseout="setMiniState(true, $q.screen.width)"
</template>

function setMiniState(state, width) {
  console.log('setMiniState this is ', width)
}

watch('$q.screen.width', (width) => setMiniState(undefined, width))

私はJavaScriptが初めてで、何が起こっているのか理解しようとしています。このような状況に対処するための最善の方法について、ご協力やご提案をいただきありがとうございます。