Vue Computed Method is not rendering in HTML

Hi so I have been stuck with a problem and have spent hours upon hours trying to solve it with no success. I have an array of indices (specificIndices) that is being read by an object (filteredWordsForDeck) and then it renders those objects in the html. Here is the javascript. The problem I am having is, while everything is working, the only thing that is not is the filteredWordsForDeck. It is not updating when the specificIndices is updated. The change is being reflect in the console although not in the html.

Any help would be so amazing as I have not been able to find a solution.

TLDR: Why is filteredWordsForDeck not updating when specificIndices changes.

//Words Data Set
//loaded in from vuex store.js 
const wordsForDeck = ref([]);
const alphaSorted = ref(false);
//indices that will be read through wordsForDeck
const specificIndices = ref([]);

// Function to generate indices array based on the length of wordsForDeck
const generateIndices = () => {
    specificIndices.value = Array.from({ length: wordsForDeck.value.length }, (_, i) => i);
};

// Watch for changes in the Vuex store's deckEntries
watchEffect(() => {
      // Access the words and definitions as an array from the store
    const wordsAndDefinitionsArray = store.state.deckEntries[index.value] ? 
                                     store.state.deckEntries[index.value].words : [];
   // Assign the array to the ref variable
    wordsForDeck.value = wordsAndDefinitionsArray;
    generateIndices(); 
});


//filtered words reads list at specified indices
const filteredWordsForDeck = computed(() => {
    return wordsForDeck.value
        .map((word, index) => ({ word, index }))  
        .filter(item => specificIndices.value.includes(item.index));

});

//Alphabetical sorting

//structure of ALPHABETICAL SORT
//wordsForDeck is rendered to html based on the order its indices
//array with original indices of all the words is created (this array contains the order in which they were created)
//when the sorta alpha is called, the indices are rearranged in the array to follow the alphabetical orders of the first word
//the array of indices that wordsForDeck reads changes based on whether alphaSorted is true or false

const sortAlpha = () =>{

    if (!alphaSorted.value){
      
        //sort indices based on alphabetical order
        const indexedWords = wordsForDeck.value.map((w, index) => ({ index, word: w.word }));
        indexedWords.sort((a, b) => a.word.localeCompare(b.word));
        specificIndices.value = indexedWords.map(iw => iw.index);
 
        //indices array now holds the alphabetically sorted arrays
        console.log(specificIndices.value);

        alphaSorted.value = !alphaSorted.value;

    } else {
        generateIndices();

        console.log(specificIndices.value);

        alphaSorted.value = !alphaSorted.value;

    }
}

Here is the html

        <div v-for="(word, index) in filteredWordsForDeck" :key="index" class = "w-full h-auto bg-white flex flex-row p-2 rounded-lg border justify-between" >
            <div class = "w-1/3 h-auto break-word text-left">
                <h class = "text-base text-gray-400">{{ index + 1 }}</h>
                <h class = "text-xl text-gray-600 w-8 relative left-4">{{ word.word.word }}</h>
            </div>
            <div class = "w-1/3 h-auto break-word">
                <p class = "text-base text-gray-400 mt-1">{{ word.word.definition }}</p>  
            </div>
        </div>