nuxtでクエリが変わってもfetchが動かない

概要

nuxtは pages 配下で fetch メソッドを用意することで、ページを読み込む手前でページに必要なデータをfetchすることができる。 しかしページからページへの遷移では発火するが、キーワードやページ番号といったクエリが変更しても fetch は発火しない。

解決策

watchQuery を使えと書いてあった。

fetch メソッドは、デフォルトではクエリ文字列の変更に対して呼び出されません。

API: fetch メソッド - Nuxt.js ja.nuxtjs.org

<template>
...
</template>

<script>
export default {
  name: "KeywordSearchPage",
  watchQuery: ["q", "page"],
  ...
}
</script>

...