Ion-button color attribute from variable

i setup new colors thru scss.
and if I use the literal name in the color field, it works


BUT i want to generate the content with a v-for, so take the name of the color from an array of colors


this doesn’t work
I use a similar field (defined in the data section) to provide the text of the button, and its id
and this works…

the names of the colors are valid and work if hard coded…

in package.json
@ionic/vue”: “^5.4.0”,

    const colors: Array<string> = ['xxx','yyyy', 'zzzz', 'qqqq'];
    const labels= ["rrrr","eeee", "yyyy", "nnnn"];
    return {colors, labels }

template part

     <div id="container" v-if="gender === '1'">
            @click="setTarget(  labels[0]  )">
            @click="setTarget(  labels[1]  )">

1st one works, second one fails

when I hover over the button in the developer window in chrome, I see
Screenshot at 2021-06-11 08-44-32

which means it didn’t do the substitution for the {{}} for the ID or the color

what did I do wrong?

it DID do the substitution for the text value of the button
and works in my onclick… so I have addressibility to those variables

here is the hover over the one with the literal
Screenshot at 2021-06-11 08-52-53