title: Vue.js app works in development but not mounting template in production with Rails 5.2.0 / Webpacker - blank screen with no errors in console
body: <p>I'm using Rails 5.2.0 and Webpacker gem to deploy a Vue application.</p>
  
  <p>The show.html.erb file is very simple:</p>
  
  <p><code>&lt;div data-behavior="vue-app"&gt;&lt;MyComponent&gt;&lt;/MyComponent&gt;&lt;/div&gt;</code></p>
  
  <p>And then in my entry pack, packs/my_vue_app.js:</p>
  
  <pre><code>import TurbolinksAdapter from 'vue-turbolinks';
  import Vue from 'vue/dist/vue.esm'
  Vue.use(TurbolinksAdapter);
  import MyComponent from '../components/my_app/index.vue'
  
  document.addEventListener('turbolinks:load', () =&gt; {
  
    var element = $('[data-behavior="vue-app"]');
  
    if(!element) { return };
  
    console.log('Initializing Vue');
  
    const app = new Vue({
      el: element[0],
      data: {
  
      },
      components: { MyComponent }
    })
  })
  </code></pre>
  
  <p><strong>In development, everything works absolutely fine. The app is mounted and functional.</strong></p>
  
  <p>But in production, after the page load and JS runs, <code>&lt;div data-behavior="vue-app"&gt;</code> is removed from the paging, leaving only <code>&lt;!-- --&gt;</code> in it's place.</p>
  
  <p>In the console, there are absolutely no errors. I can confirm using DevTools that the pack js file is loaded, and it was parsed, since the console.log is printed in the console.</p>
  
  <p>Heck, the proof that Vue is working is that the entire <code>&lt;div&gt;</code> where it was mounted was removed from DOM after JS parsing. </p>
  
  <p>The weirdest thing of all is that I could get the app to mount ONCE, by attaching a debugger on the console.log line and turning it off while the debugger paused execution. Even tough I saw the app mounting that time, I could not get it to mount later on, even fiddling with the debugger again ... it's really, really weird. </p>
  
  <p>These are the versions of package.json:</p>
  
  <p><code>
  "vue": "^2.5.16",
  "vue-loader": "14.2.2",
  "vue-template-compiler": "^2.5.16",
  </code></p>
  
  <p>The Rails app is brand new, with no config other than the default.</p>
  
  <p>Webpacker gem is 3.5.3 and Rails is 5.2.0. </p>
  
  <p>After spending a really long time on this, I only found this github issue: <a href="https://github.com/rails/webpacker/issues/1520" rel="noreferrer">https://github.com/rails/webpacker/issues/1520</a></p>
  
  <p><strong>EDIT</strong>: I'm providing a link to the real, production app where this bug is happening: <a href="https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q" rel="noreferrer">https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q</a></p>
  
  <p>You'll see it's not mounting. Here's the same page in development:</p>
  
  <p><a href="https://i.stack.imgur.com/ZZbk0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZZbk0.png" alt="screenshot of app mounted"></a></p>