Очевидно, с помощью одной строковой переменной задать цвет нескольких блоков затруднительно.
Пусть будет массив, элементы которого задают цвет отдельных блоков:
data: () => ({
items: Array(10).fill(null),
...
<ul>
<li v-for="(n, i) in items" :style="index < i || { color: n }">
{{ i }}
</li>
</ul>
Копипастить кнопки и методы для переключения цвета не очень здорово - что если цветов будет не два, а пять? Десять? Сорок? Сделаете сорок разных методов и вручную напишите разметку для сорока кнопок?
Метод оставьте один, а устанавливаемый цвет сделайте его параметром:
methods: {
next(color) {
const { index, items } = this;
this.index = index === items.length - 1 ? 0 : index + 1;
items.splice(this.index, 1, color);
},
...
А доступные для назначения цвета складываете в массив, на основе которого создаются кнопки:
data: () => ({
colors: [ 'red', 'lime', 'blue', 'orange', 'magenta', 'aqua', 'yellow' ],
...
<button v-for="c in colors" @click="next(c)">{{ c }}</button>
https://jsfiddle.net/wcjkft23/ 
