why v-bind:style is not reacting to changes if the data is set to a false value (null, false, undefined etc.)

I am working with an accordion component and need to change the 'max-height' property of accordion body based on the value set to a vue data named 'cardBodyHeight'. This is the template part of the component:

<template>
    <div class="input-card">
        <div class="input-card__header">
            <div class="input-card__title">
                <slot name="title">Card Title</slot>
                <button class="input-card__cta" :class="{collapsed:cardCollapsed}" @click="toggleCardCollapse">
                    <i class="fas fa-caret-down"></i>
                </button>
            </div>
        </div>
        <div class="input-card__body" ref="inputCardBody" :style="{maxHeight: cardBodyHeight ? cardBodyHeight+'px' : 'auto'}" :class="{collapsed:cardCollapsed}">
            <div class="input-card__body__content">
                <slot name="body">Card Body</slot>
            </div>
        </div>
    </div>
</template>

and this is the script part:

<script>
export default {
  name: "InputCard",
  data() {
    return {
      cardCollapsed: true,
      cardBodyHeight: null
    };
  },
  methods: {
    toggleCardCollapse() {
      this.cardCollapsed = !this.cardCollapsed;
      // recalculate card body max height
      this.cardBodyHeight = this.$refs.inputCardBody.scrollHeight;
      // set the max-height to auto after 0.5s
      setTimeout(()=>{
        this.cardBodyHeight = null;
      },500);
    }
  }
};
</script>

I expected to vue that the inline 'max-height' property will be set to 'auto' when 'cardBodyHeight' is set to null (see the setTimeout portion in 'toggleCardCollapse' method) but it seems vue doesn't care at all if the value is falsy. the style binding works just fine if the value is number. What am I missing here?

Thanks in advance!