title: Vue - access data in component outside of Vue - Single file component
body: <p>How to access and change data of compontent out side the component and Vue instance but inside single-file-component?</p>
  
  <p>Component in sigle file like:</p>
  
  <pre><code>&lt;script&gt;
      export default {
          data() {
              return {
                  lock: true,
                  connection: '',
                  login: true,
                  message: {
                      time: '',
                      nick: '',
  .......................
  </code></pre>
  
  <p>The file is chat.vue</p>
  
  <p>Main Vue app:</p>
  
  <pre><code>var app = new Vue({
      el: '.app',
  
      components: {
          Chat
      }
  
  });
  </code></pre>
  
  <p>And I need to access and example data from something like</p>
  
  <pre><code>Socket.onopen = function(e)
      {
          Chat.connection = 'Zostałeś połączony pomyślnie!';
          Chat.lock = false;
      };
  </code></pre>
  
  <p>Outside of component but in this component file</p>
  
  <p>tried something like</p>
  
  <p><code>Chat.message.nick = 'xxxx';</code> but doesn't work</p>
  
  <p><code>this.message.nick = 'xxx';</code> doesn't work too + I got error: <code>named exports are not supported in *.vue files.</code></p>
  
  <p><code>var chat = export default....</code> doesn't work too, blowup</p>
  
  <p>And many things... I don't know...</p>
  
  <p>the only thing I worked out is to use <code>ref="Chat"</code> on component in HTML. But it is not what I want, it allows me to reference my component's data but in not in this component vue single file but in my main js file</p>
  
  <p>I need to reference data and change it in this compontent vue single file</p>