GSAP and Vue re-animate on value change

Howdy, I'm still kind of learning ins and outs and reactivity of the Vue while working on Spark project and I have a specific issue I got my head wrapped around but can't seem to solve.

Here's the scenario:

I have a component. It's a header action bar that has a div that contains some value. This value is passed into by Vue and it looks like this:

HTML

<dp-actionsheader :user="user" inline-template>
<div class="flex-fill flex-center dp-subheader-container">
    <div class="dp-subheader-sectional-info">
        <div class="dp-subheader-icon"><span class="icon-user7"></span></div>
        <div class="dp-subheader-info">
            <div class="dp-subheader-suptitle">Dashboard</div>
            <div class="dp-subheader-maintitle" id="dp-action-title">@{{ currentTitle }}</div>
        </div>
    </div>
</div>
</dp-actionsheader>

JS

Vue.component('dp-actionsheader', {
    mixins: [base],
    data() {
        return {
        tl: null
                currentTitle: ''
        }
    },

    created() {

    // dp-action-title is the ID of the element containing the value (the title). The title is passed into the component via Bus.$on when the tab-state change happens.

    // setting the perspective on the div holding the value
        TweenLite.set($("#dp-action-title"), {perspective:400});

    // initialize the timeline for staggering animations
        this.tl = new TimelineLite;

    // run initial check for the title value
        this.getActionBarTitle();

    }

    methods: {
        getActionBarTitle() {
            var self = this;

            Bus.$on('sparkHashChanged', function (hash, parameters) {
                let title;

                switch (hash) {
                    case 'profile':
                        title = 'Profile Settings';
                        break;
                    case 'security':
                        title = 'Security Settings';
                        break;
                    case 'subscription':
                        title = 'Subscription Settings';
                        break;
                    case 'payment-method':
                        title = 'Payment Settings';
                        break;
                    case 'invoices':
                        title = 'Misc Billing Settings';
                        break;

                    default:
                        break;
                }

                self.currentTitle = title;

        // after changing the value animate the title
                var mySplitText = new SplitText($("#dp-action-title"), {type:"words,chars"});

                var chars = mySplitText.chars; //an array of all the divs that wrap each character

                self.tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, 0.01, "+=0");

            });
        },

I get the animation working, however, the value of the html does not change. It keeps reanimating the old/initial value because I know I'm not doing it right since the animation is triggering before Vue can actually update it through the cycle.

I tried with nextTick but that doesn't work either.

Anyone care to help me out figure it out?

Thanks!