title: Pass variable down to VueJS component
body: <p>I need to pass down a variable to a component. My setup is like this: </p>
  
  <p>Main: <strong>Meet.vue</strong> </p>
  
  <pre><code>&lt;html&gt;
   &lt;div class="carousel-cell"&gt;
      &lt;Category :searchTerm="woman"&gt;&lt;/Category&gt;
      &lt;/div&gt;
   &lt;div class="carousel-cell"&gt;
      &lt;Category :searchTerm="men"&gt;&lt;/Category&gt;
      &lt;/div&gt;
  [..]
  &lt;script&gt;
  import Category from './Category'
  export default {
    components: {
      Category
    },
  </code></pre>
  
  <p>Sub: <strong>Category.vue</strong>:</p>
  
  <pre><code>export default {
    data () {
      return {
        search: [how to access the **searchTerm** here?]
  </code></pre>
  
  <p>How to access the <strong>searchTerm</strong> <code>&lt;Category :searchTerm="woman"&gt;&lt;/Category&gt;</code> from Meet.vue in Category.vue?  </p>