Quasar: Underline not animating correctly when tab name is Integer 0

[Powersource]

Reproduction code for codepen

<div id="q-app">
  <div style="max-width: 600px">
    <q-tabs :value="1">
      <q-tab :name="0" icon="mail" label="Mails" ></q-tab>
      <q-tab :name="1" icon="alarm" label="Alarms" ></q-tab>
      <q-tab :name="2" icon="movie" label="Movies" ></q-tab>
    </q-tabs>
  </div>
</div>

new Vue({
  el: '#q-app'
})

With this code, the line below the tab doesn't animate when going to/from the first tab. But it works if you change the names to 1,2,3 instead. It doesn't matter what value is set to.

[nothingismagick]

:name="0" will evaluate as false. This is because you are telling the Vue
renderer to calculate / execute a function when you put the colon in front
of the prop.

Try name="0"

Sometimes I hate Javascript, you know? arrays start at numeric zero, but
zero is also binary false. :(

>

[Powersource]

Yeah that'd solve this code, but in my actual code I'm getting the 0 from the index in a for-loop. Currently getting around it by offsetting +1 when rendering and then offsetting -1 when I need to pass the state along.

[nothingismagick]

Then don't use the index as the name of the tab.

>

[rstoenescu]

Fix will be available in 1.1.0