title: Pass the data from Vue instance to the Vue component
body: <p>How can I pass the data from the Vue instance to the Vue component? I'm trying to do 'v-for' on a 'li' that resides in my component template, here's the <a href="https://jsfiddle.net/mejuliver/tjqr4h6p/2/" rel="nofollow">fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;my-notification&gt;&lt;/my-notification&gt;
  &lt;/div&gt;
  
  &lt;template id="my-template"&gt;
      &lt;ul&gt;
          &lt;li v-for="nn in notifications"&gt;{{ nn }}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Vue script</p>
  
  <pre><code>Vue.component('my-notification',{
      template : '#my-template',
  });
  
  new Vue({
      el : '#app',
      data : {
          notifications : ['notification 1','notification 2','notification 3']
      }
  });
  </code></pre>
  
  <p>Unfortunately what have I tried so far (see my fiddle) is not working, any help please?</p>