v-for에서 style을 사용하려 할 때

선생님께서 올려주신 양질의 강의를 통해서 Vue 실력을 키워나가고 있는 Vue린이입니다.

강의에서 배운 내용을 바탕으로 스스로 실습을 진행하던 중 어려움에 부딪혀 질문드립니다..

현재 제 상황은 하나의 컴포넌트 안에서 li 엘리먼트를 v-for로 반복하려 합니다.

각 li 요소마다 다른 색상과 다른 위치를 지정해주기 위하여 style 내부에 변수를 선언해주었고, 다음과 같이 반응형 배열을 만들었습니다.

...

<li v-for="value in valueArr" :key="value.id" style="{--i: value.id, --clr: value.color}">
  <a href="#">
    <ion-icon :icon="value.logo"></ion-icon>
  </a>
</li>

...

const valueArr = reactive([
  {
    id: 0,
    color: '#f70000',
    logo: logoYoutube,
  },
  {
    id: 1,
    color: '#e71a21',
    logo: logoPinterest,
  },
  {
    id: 2,
    color: '#3bd580',
    logo: logoAndroid,
  },

그런데 style 내부에 선언해준 변수에 값을 대입하기 위해 valueArr을 순회하는 value를 참고해서 id와 color값을 할당하고있는 상황이지만 자꾸 인식을 못하는 상황입니다.. 어떤 방법을 사용하면 해결할 수 있을지 여쭤볼 수 있을까요?.. 감사합니다..!!

v-bind:style="{--i: value.id, --clr: value.color}" // v-bind 활용

:style="{--i: value.id, --clr: value.color}"  // v-bind의 단축표기

style="{--i: value.id, --clr: value.color}"