I have an array:

[{ title: 'title 1', options: ['a', 'b'] },
{ title: 'title 2', options: ['c', 'd'] },
{ title: 'title 3', options: ['e', 'f'] }]

And I render this array using v-for:

<div v-for="(item, i) in content" :key="item.title">
    <div>
        <div>{{ item.title }}</div>
        <div :class="{'selected-item': i === selectedIndex}">
            {{ item.options[selectedOptionIndex] }}
        </div>
    </div>
</div>

When I change the value of the selectedOptionIndex, it changes for each index (for title 1, title 2 and title 3). I want change option only for e.g title 1. How I can fix it?