title: Vue.js: How to Use a Variable from Another Component in a Method
body: <p>Let's say I have some data in a Vue component (we'll call it Data.vue) like this:</p>
  
  <pre><code>&lt;script&gt;
  export default {
      data(){
          return{
              data1: {some data}
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to use that data on another page (Main.vue) in a method. </p>
  
  <pre><code>&lt;script&gt;
  export default {
      methods: {
          someMethod: function(){
              console.log(this.data1)
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>How would I go about doing this? </p>
  
  <p>I did try importing it the data to "Main.vue" like this:</p>
  
  <pre><code>import { data1 } from '@/components/Data'
  </code></pre>
  
  <p>What other steps do I need to take? </p>