title: Vue 2 data returned by component data function are not defined
body: <p>I am developing an application and I am using <code>Vue 2</code> as my javascript framework, I tried to declare some <code>components</code> and use them in my <code>html</code> pages
  this is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet"  
       href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css"  /&gt;   
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="modal_element" &gt;
  
  &lt;modal v-if="showModal" &gt;&lt;/modal&gt;
  
  &lt;button @click="showModal = true" &gt;Show Modal&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;div id="root"&gt;
    &lt;ul&gt;
     &lt;li v-for="task in incompeletedTasks" &gt;
        {{ task.description }}
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://unpkg.com/vue@2.1.10/dist/vue.js" &gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;    
  &lt;script src="modal.js" &gt;&lt;/script&gt;
  &lt;script&gt;
     let main_data = {
       tasks : [
          { description : "Go to the store ", completed : true },
          { description : "Leave the store" , completed : false }
         ]        
      }
     new Vue({
       el : "#root",
       data : main_data,
       computed : {       
         incompeletedTasks() {
          return this.tasks.filter(task =&gt; !task.completed);
         }
     }
   });
  </code></pre>
  
  <p>
     </p>
  
  <p>and this the <code>modal.js</code> file: </p>
  
  <pre><code>Vue.component('modal',{
    template : '&lt;div id="modal_element"&gt;
            &lt;div class="modal is-active"&gt;
            &lt;div class="modal-background"&gt;&lt;/div&gt;
            &lt;div class="modal-content box"&gt;
              &lt;p&gt;
                Some Modal Text here ...
              &lt;/p&gt;
             &lt;/div&gt;
            &lt;button class="modal-close" @click="showModal = false" &gt;
            &lt;/button&gt;
         &lt;/div&gt;',
  
     data : function(){
       return {
         showModal : false
       };
     }
    });
  
   new Vue({
    el : '#modal_element',
   });
  </code></pre>
  
  <p>but the modal is not displayed, and I am getting the following error in the <code>chrome console</code></p>
  
  <pre><code>   [Vue warn]: Property or method "showModal" is not defined on the instance        
      but referenced during render. Make sure to declare reactive data 
      properties in the data option. 
  </code></pre>
  
  <p><strong>Question</strong>:
  what modification do I have to make to get the code working? and html page successfully displays <code>modal</code>?</p>