Vue: vbind:style does not work with zIndex

[blimmer]

Version

2.5.22

Reproduction link

https://codesandbox.io/s/rm36pyr37q

Steps to reproduce

Given a very simple component:

<template>
  <div v-bind:style="styleObject">This div should have a large z-index</div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      styleObject: {
        maxWidth: "400px",
        minWidth: "auto",
        opacity: 1,
        padding: "5px",
        position: "fixed",
        right: "10px",
        top: "10px",
        zIndex: "100 !important" // this doesn't work
        // "z-index": "100 !important" // this works
      }
    };
  }
};
</script>

zIndex is not bound to style

What is expected?

Binding zIndex does not get kebab-cased like maxWidth and minWidth. I expected it to work the same way. Passing z-index works as expected.

What is actually happening?

The zIndex variable is ignored entirely.

---

I was creating an alert-style box that needs a high z-index to appear "on top" of other elements on the page.

[yyx990803]

FYI this is not specific to zIndex. It's caused by camelCase names not converted to kebab-case when the value contains !important.