ExampleFile.vue

<template>
//SIMPLIFICADO AQUI PUEDE HABER COSAS MAL PORQUE LO HAGO UN POCO DE CABEZA
     <select        placeholder="Select country"
                    @change="filterList(testing2,filters,details, selectedFilter)"
                    name="details"
                    id="details"
                    class="details form-sel"
                    v-model="selectedFilter">
                <option value="All">details List</option>
                <option v-for="item of testing2" :value="item"> {{ item }}</option>
      </select>
      <ul>
      <li v-for="item in sortedData">item.details</li>
      </ul>
</template>
<script setup lang="ts">
import { useFilter } from '@/composables/useFilter';
import { onMounted, ref } from 'vue';
//Products sería un ejemplo de lo que viene de la api
 const products = ref<any>([
      { name: 'A', color: 'Blue', size: 50, locations: ['USA', 'Europe'], details: { length: 20, width: 70 } },
      { name: 'B', color: 'Blue', size: 60, locations: [], details: { length: 20, width: 70 } },
      { name: 'C', color: 'Black', size: 70, locations: ['Japan'], details: { length: 20, width: 71 } },
      { name: 'D', color: 'Green', size: 50, locations: ['USA'], details: { length: 20, width: 71 } },
    ]);
      const testing2 = ref<any>();
      
    onMounted( => {
    sortedData.value = products.value; 
     testing2.value = removeDuplicatesSelectedList(details);
    }
    )
    
      const filters = {
      details:  (details:any) => details.length == selectedFilter.value,
    };
    
    const details = {
    countryLink: (details:any) => details.lengt
}
</script>

useFilter.ts

import { onMounted, ref, toRefs } from "vue";

export const useFilter = () => {
  const sortedData = ref<any>();
  const valueObject = ref<any>();

  const getObject = ref<any>([]);

  const sortedbyASC = ref(true);
  const selectedFilter = ref<any>();
  const filterArray = ref<any>();
  
  const filterList = (testing: any,filters: any, getSelectedList: any, valueSelected: any) => {
    const filterKeys = Object.keys(filters);
    console.log(filters);
    sortedData.value = valueSelected === "All"
      ? (sortedData.value = valueObject.value)
      : sortedData.value.filter((item: any) => {
        // validates all filter criteria
        return filterKeys.every((key: string) => {
          // ignores non-function predicates
          if (typeof filters[key] !== 'function') return true;
          return filters[key](item[key]);
        });
      });
      console.log(valueSelected);
    if (valueSelected === "All") {
    //El problema se encuentra aqui
      testing = removeDuplicatesSelectedList(getSelectedList);
      console.log(testing);
      return testing

    } else {
      testing = removeDuplicatesSelectedList(valueSelected);
      console.log(testing);
      return testing
    }
  }

  const removeDuplicatesSelectedList = (filters: any) => {
    const filterKeys = Object.keys(filters);
    let getList: Array<string> = [];
    sortedData.value.filter((item: any) => {
      return filterKeys.every((key: any) => {
        if (typeof filters[key] !== 'function') return true;
        return getList.push(filters[key](item[key]))
      });
    });
    let removedFromArray = [...new Set(getList)];
    if (removedFromArray.length <= 0) {
      removedFromArray.push(filters)
    }
    return removedFromArray
  }

  return {
    selectedFilter,
    valueObject,
    filterList,
    filterArray,
    removeDuplicatesSelectedList,


  }
};

Dynamic filter list.

on const filter we will pass the type of filter we want
const filters = {
details: details => details.length == selectedFilter.value
};

https://gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72