VueJS use v-for variable as attribute value

I have an iterative loop that using v-for on an array of objects that then renders a html li item

<li class="block" v-for="(section, key) in sectionDetails">
    <a href="#" tabindex="{{ key }}">Item {{ key }}</a>
</li>

The problem here is that key in the tabindex attribute is not being rendered, what IS being rendered is {{ key }}.

How can I get the value of key to be used for tabindex? I've also tried, :tabindex but that gives me a Javascript error.