How to make animated div width change with Vue/Velocity?

Question

The title of this question may be oversimplifying what I am trying to accomplish, or perhaps I am not looking at this from a good angle. I have a side navigation that I want users to be able to collapse and expand, but in either instance, it is still shown, just a different width.

When the sidebar is loaded, each navigation item has a logo and a title. When you "collapse" the menu, the title should disappear but the logo remain. The showing/hiding the title when collapsing is simple, but animating it is a little tricky.

My first approach was all css, and it worked, but didn't feel really smooth, so I decided to reach for the velocity-animate library. This doesn't seem to work at all. I'm using Vue router, and these navigation items are router links generated from a loop. Here is what the code looks like

<router-link to="{{ $tool->menu() }}">
    <div class="sidebar-tool-icon-container">
        {{ $tool::icon() }}
    </div>
    <transition-group 
        tag="div"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        :css="false"
    >
    <div class="sidebar-tool-title-container" v-if="!collapsed" :key="{{ $key }}">
        <h3>{{ $tool->displayName }}</h3>
    </div>
    </transition-group>
</router-link>

The collapse property is toggled when the user clicks "collapse/expand". Here is my javascript that should be controlling animation:

beforeEnter(el) {
    el.style.opacity = 1;
    el.style.width = '3em';
},
enter(el, done) {
  Velocity(
    el,  
    { opacity: 1, width: '10em' },
    { duration: 500, easing: 'easeInCubic', complete: done }
  )
},
leave(el, done) {
  Velocity(
    el, 
    { opacity: 1, width: '3em' },
    { duration: 500, easing: 'easeOutCubic', complete: done }
  )
}

The animation does not seem to work. The collapse/expand itself works as expected, but there is no animation to it, and there is actually a little glitch in the sequence. How can I get this animation to work?