title: Passing data from Props to data in vue.js
body: <p>I have the following vue component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class ="container bordered"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
    &lt;CommitChart :data="chartOptions"&gt;&lt;/Commitchart&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import CommitChart from './CommitChart';
  
  export default {
    data() {
      return {
        chartOptions: {
          labels:  ['pizza', 'lasagne', 'Cheese'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                  'rgba(10, 158, 193, 1)',
                  'rgba(116, 139, 153, 1)',
                  'rgba(43, 94, 162, 1)',
  
              ],
              borderColor: [
                'rgba(44, 64, 76, 1)',
                'rgba(44, 64, 76, 1)',
                'rgba(44, 64, 76, 1)',
  
              ],
              borderWidth: 3
          }],
      },
      };
    },
    components: { CommitChart },
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>as you can see, this component is effectively a wrapper for another component which is  commitChart. Commit chart takes a json object of chartOptions. I don't want the other components to change anything but the labels and data, so I therefore would like to pass label and data as props and use these in data.</p>
  
  <p>i tried adding these as props to this component and then in data, assigning them, something like this:</p>
  
  <pre><code>    props: 
  ['label']
  </code></pre>
  
  <p>and then in data:</p>
  
  <pre><code>label: labels
  </code></pre>
  
  <p>however this doesn't work </p>
  
  <p>Any suggestions how i may achieve this?</p>