[備忘録] nuxt-property-decorator使用時にwatchQueryプロパティを使用する

備忘録のためコードのみ
あとで直したい

コード

<template>
  <article class="hoge-page">
    <div>
      {{hogehoge}}
    </div>
    <nuxt-link :to="/hoge?page=2">2ページへ</nuxt-link>
  </article>
</template>
​
​
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
​
@Component({
  components: {},
  watchQuery: ['page']
})
export default class Hoge extends Vue {
​
  hogehoge:string = '初期値'
  mogemoge:num[] = []
​  
  //SSR時とnuxt-linkが押下時に実行される
  asyncData({ query }) {
    const pageNum = !query.page? 1 :query.page //クエリーがあればその数値を、なければ1を代入
    const data = hogehogeApi
      .fetch(pageNum)
      .then(res => {
        return {
          //上で定義したdataに上書きされる
          hogehoge: res.hogehoge,
          mogemoge: res.mogemoge
        }
      })
      .catch(e => {
        console.log(e)
      })
    return data 
  }
}
</script>