title: Vue.js show hide multiple elements with data list
body: <p>I'm new in Vue.js, i'm using Vue+Webpack. I need that each link can show the data based on each id when they're clicked, and match with show attribute. I create it in <code>.vue</code> file. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    el: 'skill',
    props: {
      skill: Object,
      selectedId: Number
    },
    computed: {
      show () {
        return this.skill.id === this.selectedId
      }
    },
    name: 'HomePage',
    data () {
      return {
        show_skill: 1,
        skills: [
          {
            id: 1,
            title: 'css',
            items: '&lt;li&gt;CSS 3&lt;/li&gt;&lt;li&gt;Sass/Less&lt;/li&gt;&lt;li&gt;CSS Animations&lt;/li&gt;&lt;li&gt;CSS Frameworks : Bootstrap, Zurb Foundation, Bulma, Material Design&lt;/li&gt;',
            show: true
          },
          {
            id: 2,
            title: 'js',
            items: '&lt;li&gt;Vanilla JS&lt;/li&gt;&lt;li&gt;jQuery&lt;/li&gt;&lt;li&gt;Angular JS&lt;/li&gt;&lt;li&gt;Vue JS&lt;/li&gt;&lt;li&gt;Ajax&lt;/li&gt;&lt;li&gt;JSON&lt;/li&gt;',
            show: false
          },
          {
            id: 3,
            title: 'html',
            items: '&lt;li&gt;HTML 5&lt;/li&gt;&lt;li&gt;SVG Animation&lt;/li&gt;&lt;li&gt;Canvas&lt;/li&gt;',
            show: false
          },
          {
            id: 4,
            title: 'general',
            items: '&lt;li&gt;Responsive Web Design&lt;/li&gt;&lt;li&gt;Adaptive Web Design&lt;/li&gt;&lt;li&gt;Hybrid Mobile App&lt;/li&gt;&lt;li&gt;Wordpress Template&lt;/li&gt;&lt;li&gt;Email Template&lt;/li&gt;',
            show: false
          },
          {
            id: 5,
            title: 'tools',
            items: '&lt;li&gt;Git&lt;/li&gt;&lt;li&gt;Gulp/Grunt&lt;/li&gt;&lt;li&gt;Npm&lt;/li&gt;&lt;li&gt;Webpack&lt;/li&gt;&lt;li&gt;Bower&lt;/li&gt;&lt;li&gt;Sketch&lt;/li&gt;&lt;li&gt;Adobe XD&lt;/li&gt;&lt;li&gt;Adobe Illustrator&lt;/li&gt;&lt;li&gt;Adobe Photoshop&lt;/li&gt;&lt;li&gt;InVision&lt;/li&gt;&lt;li&gt;Marvel&lt;/li&gt;',
            show: false
          }
        ]
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="c-skills"&gt;
    &lt;a href="#" class="active" @click="skill.show"&gt;CSS&lt;/a&gt;
    &lt;a href="#"&gt;JS&lt;/a&gt;
    &lt;a href="#"&gt;HTML&lt;/a&gt;
    &lt;a href="#"&gt;Tools&lt;/a&gt;
    &lt;a href="#"&gt;General&lt;/a&gt;
  &lt;/div&gt;         
  
  &lt;div class="c-desc" id="vn-skillset"&gt;
      &lt;skill :selected-id="selectedId" :post="skill" @click="selectedId = skill.id"&gt;
        &lt;h4 v-show="skill.show"&gt;{{ skill.title }}&lt;/h4&gt;
        &lt;ul v-show="skill.show"&gt;{{ skill.items }}&lt;/ul&gt;
      &lt;/skill&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>currently that code shows error : 
  <a href="https://i.stack.imgur.com/gotnJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gotnJ.png" alt="enter image description here"></a></p>
  
  <p>What is vue.esm? What is $mount? 
  What the right things should I do to reach what i need? 
  How to implement that?</p>