Lahma

У вас бардак в алгоритме поэтому с `new Fuse` (скорее всего и с useFuse) работает, но не так как вы ожидали.
Пустой массив это логичный вывод console.log('results:', results) в этот момент
потому что getProducts() вы вызываетe после изменений в input

Рабочий кусок с useFuse

import { useFuse } from '@vueuse/integrations/useFuse';
const data = ref([]);
const input = ref('')
const found = ref();
fetch('https://fakestoreapi.com/products').then(r => r.json()).then(j => {data.value = j}) 
const { results } = useFuse(input, data, { matchAllWhenSearchEmpty:false, fuseOptions: { includeScore: true, keys: ['title'] } })
/*<template>
    {{ results }}
</template>*/

Добавляем в компонент свойство - индекс выбранного элемента выпадающего списка, по нажатию на стрелки делаем ему плюс-минус один. В зависимости от равенства значения этого свойства текущему индексу в v-for назначаем элементу списка класс, который его визуально выделит. Как-то так.

const filteredProducts = computed(() => {
  const search = searchQuery.value.toLowerCase();
  return search.length > 2
    ? data.value.filter(n => n.title.toLowerCase().includes(search))
    : null;
});

<ul v-if="filteredProducts" class="search-result">
  <li v-if="!filteredProducts.length">
    <h3>ничего не найдено</h3>
  </li>
  <li v-for="n in filteredProducts">
    <div>
      <Image :src="n.image" :alt="n.title" width="40" height="40" />
    </div>
    <h3>{{ n.title }}</h3>
    <div>
      <p>{{ n.price }}</p>
    </div>
  </li>
</ul>