title: Flash of unstyled content vuejs
body: <p>I have problem. When I loading page with vue, I get variables: <code>@{{ value }}</code>. But when page full loaded, variable not visible. How I can fix this? I use bootstrap and all scripts included before: <code>&lt;/body&gt;</code>.</p>
  
  <p>My template:</p>
  
  <pre><code>&lt;div class="container padding-bottom-3x mb-1"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-9"&gt;
            &lt;ul class="messages-list" v-chat-scroll&gt;
              &lt;message v-for="value,index in chat.message" 
                  :key=value.index 
                  :user=chat.user[index]
                  :time=chat.time[index]
              &gt;
                  @{{ value }}
              &lt;/message&gt;
            &lt;/ul&gt;
            &lt;div class="send-message"&gt;
              &lt;form action=""&gt;
                &lt;div class="form-group"&gt;
                  &lt;span class="text-danger"&gt;@{{ typing }}&lt;/span&gt;
                  &lt;textarea class="form-control" v-model='message' @keyup.enter='send'&gt;&lt;/textarea&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;!-- &lt;nav class="pagination"&gt;
                &lt;div class="column"&gt;
                  &lt;ul class="pages"&gt;
                    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;...&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="column text-right hidden-xs-down"&gt;&lt;a class="btn btn-outline-secondary btn-sm" href="#"&gt;Next&amp;nbsp;&lt;i class="icon-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/nav&gt; --&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-3"&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, iure totam ex laborum quidem vel nemo eveniet dolores natus id exercitationem veritatis maiores labore eum nam ab possimus, dolorum architecto!
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Vue component:</p>
  
  <pre><code>&lt;template&gt;
  &lt;li&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2 padding-right-none"&gt;
              &lt;div class="avatar-user text-center"&gt;
                      &lt;img :src="user.avatar" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-10 padding-left-none"&gt;
              &lt;div class="user-name"&gt;
                  &lt;span&gt;{{ user.name }} &lt;i data-toggle="tooltip" title="Онлайн" class="material-icons online"&gt;fiber_manual_record&lt;/i&gt; &lt;span class="date float-right"&gt;{{ time }}&lt;/span&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="message"&gt;
                  &lt;slot&gt;&lt;/slot&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: [
          'user',
          'time',
      ],
      mounted() {
          console.log('Component mounted.')
      }
  }
  </code></pre>
  
  <p></p>