Omitted import statements

Pinia store: inputData.ts

interface State {
    userInputValues: [
        string, string, string, string,
        string, string, string, string,
        string, string, string, string,
        string, string, string, string,
    ]
}


export const useInputDataStore = defineStore("inputData", {
    state: (): State => {
        return {
            userInputValues: [
                "", "", "", "",
                "", "", "", "",
                "", "", "", "",
                "", "", "", "",
            ]
        }
    }
})

I know there should be 16 strings in the array, so I defined an interface

I have a component here:

<script setup lang="ts">

const store = useInputDataStore();
const { userInputValues } = storeToRefs(store);


const props = defineProps<{
    inputId: number
}>();

// userInputValues is a Ref<[string, string, string...]>
// But how do I achieve it where I each string is a ref
// or userInputValues as Ref<[Ref<string>, Ref<string>, Ref<string>...]

// So here, inputBoxModel is a string not a Ref<string>
const inputBoxModel = userInputValues.value[inputId]

</script>

<template>
    <input v-model="inputBoxModel" />
</template>

What I’m trying to do

I want to have an array of 16 Ref<string>

But…

When I access the array, whats returned is a string, not a Ref<string>

So how can I make it reactive?