Navbar with Vue.js and webpacker - Flickering at page load 😒

I have a classic RoR - Webpacker app.
On top of Webpacker, we have implemented Vue as our frontend framework and Tailwind as our css framework 👌

Everything is functioning fine. Yet I am not quite happy with the navbar behaviour at page load.

The implementation is the following:
The layout.html file:

doctype html
html.no-js lang=locale
  head
    = stylesheet_pack_tag "application"
    = javascript_pack_tag "application"

  body
    div data-behavior='vue'
      = sw-navigation
      == yield

The application.js file:

import { Navigation } from '../components/layout'
Vue.component('sw-navigation', Navigation)

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]'
  })
})

The sw-navigation is a straightforward vue component.

The issue is that at loading, my navbar has a weird behaviour that's making it look ugly:
The JS not being interpreted display yet, the element of the navbar appears on the right the screen without any style.

You can see the result in my screenshot here

How can I solve this ?

• I know I can investigate in server-side rendering. But TBH I'd like to avoid that option just for a navbar component
• I know I can use a plain old html navbar, no vue component. Yet this is exactly the perfect use case for a component in my opinion (needs JS for scrolling behaviour - content changes based on variables - ...)
• What else ?

Please help, I am sure I am not the only one struggling with this 😉

Status update: [SOLVED]

Thanks to a live code of Adam Wathan himself, I found out that [v-cloak] was the solution I was looking for.

Here is the solution:
👉 https://www.youtube.com/watch?v=XUXpcbYQ_iQ&feature=youtu.be&t=2357