Vue-Turbolinks show stale information in between page load

I have a shopping cart item counter on my navbar that is first rendered by Rails then gets taken over by Vue once DOM contents are loaded. But the problem is that in between page load, Vue-Turbolinks has to destroy the Vue instance, wait for the page load, and then re-mount the Vue instance. This results in stale information showing on the browser (if the user has added more items to cart) while Vue is gone because v-text is down during this time.

Is there a way to work around this? I've tried v-cloak which works, but doesn't make for as good of a UX since the number temporarily disappears and reappears in between page load

<span v-text="rails.cart_items.length"><%= @shopping_cart.shopping_cart_items.length %></span>