fix improper watch usage in VPLPluginItems

.vitepress/theme/VPLPluginItems.vue

@@ -15,7 +15,7 @@
           >
             <Plugin
               :plugin="plugin"
-              :type="type"
+              :type="props.type"
             />
           </div>
         </div>
@@ -43,7 +43,7 @@ const Plugin = defineAsyncComponent({
   loader: async () => VPLPluginItem,
 });
 
-const {items, pager, type, tags} = defineProps({
+const props = defineProps({
   items: {
     type: Array,
     required: true,
@@ -63,19 +63,19 @@ const {items, pager, type, tags} = defineProps({
 });
 
 // Hardcoded pager value for now
-const amount = ref(pager);
+const amount = ref(props.pager);
 const key = ref(0);
 
 // normalize data and sort
-let pages = items
+let pages = props.items
   .map(item => Object.assign(item, {show: true, timestamp: item.date ? item.date : item.timestamp}))
   .sort((a, b) => a.title > b.title ? 1 : -1);
 
-const adder = () => amount.value += pager;
+const adder = () => amount.value += props.pager;
 
 const grid = computed(() => {
   const length = amount.value;
-  if (type === 'icon') return 'grid-icon';
+  if (props.type === 'icon') return 'grid-icon';
 
   if (!length) {
     return;
@@ -95,13 +95,13 @@ const grid = computed(() => {
 const pagination = () => pages.slice(0, amount.value);
 
 const filter = () => {
-  const tagList = Object.entries(tags).filter(pair => pair[1].selected === true).map(pair => pair[0]);
-  if (tagList.length === 0) return items;
-  return items.filter(item => Array.isArray(item.tags) && tagList.every(tag => item.tags.includes(tag)));
+  const tagList = Object.entries(props.tags).filter(pair => pair[1].selected === true).map(pair => pair[0]);
+  if (tagList.length === 0) return props.items;
+  return props.items.filter(item => Array.isArray(item.tags) && tagList.every(tag => item.tags.includes(tag)));
 };
 
 // recompute filter when tags change
-watch(tags, () => {
+watch(props.tags, () => {
   pages = filter();
   key.value++;
 });