@vue/composition-apiで縦と横のwindowサイズの変更検知する

最近 @vue/composition-api を触っていて、ウィンドウサイズを検知して値を取得する処理を書いたので備忘録として残します。 以下そのまま書いてもたぶん動きますが確認してないです。

import {
  defineComponent,
  reactive,
  onMounted,
  onBeforeUnmount,
} from '@vue/composition-api'

export default defineComponent({
  setup() {
    const state = reactive({
      width: window.innerWidth,
      height: window.innerHeight,
    })
    const resizeWidth = () => {
      state.width = window.innerWidth
    }
    const resizeHeight = () => {
      state.height = window.innerHeight
    }
    onMounted(() => {
      window.addEventListener('resize', resizeWidth)
      window.addEventListener('resize', resizeHeight)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeWidth)
      window.removeEventListener('resize', resizeHeight)
    })
    return {
      state,
    }
  },
})

template内では以下のようにして検知して値を取れます。これで横幅によって分岐ができて嬉しいかも。

<template>
  <div>
    {{state.width}}
    {{state.height}}
  </div>
</template>

もっと良い書き方あればぜひコメントください。