javascript - nuxt でクエリが更新されない

Question

私のnuxtプロジェクトには、検索フィールドのある検索ページがあります。

検索語を入力して送信すると、クエリ パラメータが URL に設定されます/search/?q=searchwordが、新しい検索を行ってもページが更新されません。q パラメータを更新しますが、結果をフェッチするために asyncData は呼び出されません。

私はwatchQuery: ['q']無駄に設定しようとしました。

私はこのasyncDataを持っています

async asyncData({ $prismic, params, query, error }) {
    try {
        // Query to get post content
        const products = await $prismic.api.query($prismic.predicates.fulltext('my.product.title', query.q), { orderings: '[my.product.title desc]' })
        // Returns data to be used in template

        return {
          products: products.results,
        }
    } catch (e) {
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  },

そして私はこれを設定しました

  watchQuery: ['q']

明らかに、何かが欠けていますが、何がわかりません。

HTMLで編集

<div class="form-wrapper">
        <form>
          <input type="text" name="q" :value="fieldValue" placeholder="Type and hit enter" />
        </form>
        <div v-if="!!fieldValue" class="num-results">Found {{ products.length }} {{ products.length === 1 ? 'product' : 'products' }}</div>
      </div>

      <div class="search-result">
        <ProductList v-if="products.length !== 0">
          <ProductWidget v-for="product in products" :key="product.id" :product="product" />
        </ProductList>
      </div>
</div>