title: Passing data to single file Vue component
body: <p>I'm having trouble getting my data to pass to props. Basically, I want to re-render this component on each page, but the content within the component should be different. Like the links, tech, feedback. So I am trying to find a way to pass that information to the component in a way that it will display without me having to delete the component and just write this on individual pages. I have looked through questions already but none of the methods seem to work. Maybe what I'm trying to do is not possible?</p>
  
  <p><code>component.vue</code></p>
  
  <pre><code>&lt;template&gt;
  &lt;el-collapse v-model="activeName" @change="handleChange" accordion&gt;
      &lt;el-collapse-item title="Links" v-model="links"&gt;
          &lt;center&gt;{{ this.links }}&lt;/center&gt;
          &lt;/el-collapse-item&gt;
          &lt;el-collapse-item title="Tech" name="2" prop-name="techlist" v-model="techlist"&gt;
              &lt;div v-for="o in this.techlist" :key="o" class="text item" &gt;
                  {{ o }}
              &lt;/div&gt;
          &lt;/el-collapse-item&gt;
          &lt;el-collapse-item title="Feedback" name="3" v-model="feedback"&gt;
              {{ this.feedback }}
          &lt;/el-collapse-item&gt;
      &lt;/el-collapse&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
      props: ['links', 'techlist', 'feedback']
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>page.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;el-row class="bg-row" type="flex" justify="end"&gt;
              &lt;el-col span="6"&gt;
                  &lt;v-menu&gt;
                  &lt;/v-menu&gt;   
              &lt;/el-col&gt;
          &lt;/el-row&gt;
      &lt;/div&gt;           
  &lt;/template&gt;
  
  &lt;script&gt;
  import Menu from 'components/Menu'
  
  export default {
    name: 'page2',
       data() {
        return {
            techlist: ["tech1", "tech2","tech3"],
            links: "&lt;center&gt;&lt;a href='page1'&gt;Github&lt;/a&gt;&lt;br&gt;&lt;a href='page2'&gt;heroku&lt;/a&gt;&lt;/center&gt;",
            feedback: '&lt;div&gt;Basically just a placehold for feature I will add to the site later on.&lt;/div&gt;'
          }
      },
      components: {
          'v-menu': Menu
      },
  }
  &lt;/script&gt;
  </code></pre>