title: Vue one or multiple instances?
body: <p>I'm quite new to Vue (in combination with Laravel). I'm not sure what's the best vue (file) structure. </p>
  
  <p>For example: I have a vue chat application and a sidebar that slides out. At this moment I have made one vue instance (at the #app element). All the code is now in this one vue instance. How should I seperate the data and code in the instance for my chatapp and sidebar?</p>
  
  <pre><code> Vue.component('chat-message', require('./components/ChatMessage.vue'));
   Vue.component('chat-log', require('./components/ChatLog.vue'));
   Vue.component('chat-composer', require('./components/ChatComposer.vue'));
  
      new Vue({
          el: "#app",
          data: {
  
  
  **//Data for the chatapp**
  
              messages : [],
  
  **//Data for the sidebar**
  
              showSidebar: false
          },
  
  **//Code for the chatapp**
  
          methods:{
              addMessage(message) {
                  this.messages.push(message);
                  axios.post('messages', message)
              }
          },
          created() {
              axios.get('messages').then(response =&gt; {
                  this.messages = response.data;
          });
  
              Echo.join('chatroom')
                  .listen('MessagePosted', (e) =&gt;{
                  this.messages.push({
                  message: e.message.message,
                  user: e.user,
              })
          });
          }
      });
  </code></pre>
  
  <p>I prefere to seperate this code to two seperate files (especially the methods and other code for the chatapp, e.g. chatroom.vue and sidebar.vue) and only load a clean vue instance e.g:</p>
  
  <pre><code>//Import components...
  ...
  ...
      new Vue({
          el: "#app"
      });
  </code></pre>
  
  <p>. Can I put this code into components? And how would this look like?</p>
  
  <p>Thanks. </p>