chore(docs): update collection page recipe

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

docs/app/components/recipes/CollectionPage.vue

@@ -39,10 +39,6 @@ const { data: collection } = await useStorefrontData(key, `#graphql
         before: route.query.before,
     })),
     transform: data => data.collection,
-    watch: [
-        () => route.query.after,
-        () => route.query.before,
-    ],
 })
 
 const products = computed(() => flattenConnection(collection.value?.products))
@@ -76,6 +72,7 @@ const hasNextPage = computed(() => collection.value?.products.pageInfo.hasNextPa
                 v-if="hasPreviousPage"
                 :to="`?before=${startCursor}`"
                 icon="i-lucide-arrow-left"
+                external
             >
                 Previous
             </UButton>
@@ -84,6 +81,7 @@ const hasNextPage = computed(() => collection.value?.products.pageInfo.hasNextPa
                 v-if="hasNextPage"
                 :to="`?after=${endCursor}`"
                 trailing-icon="i-lucide-arrow-right"
+                external
             >
                 Next
             </UButton>

docs/content/3.recipes/2.collection-page.md

@@ -64,10 +64,7 @@ This recipe will show you how to create a collection page for your Shopify store
           before: route.query.before,
         },
         transform: data => data.collection,
-        watch: [
-          () => route.query.after,
-          () => route.query.before,
-        ],
+        watch: [ () => route.query ],
       })
 
       const products = computed(() => flattenConnection(collection.value?.products))