title: How to make a component show different value according to the vue instance it is in?
body: <p>I have nested the component in both app and app2 divs. I was expecting this component will show value based on the vue instance. Please show the right way to do this. Thanks a lot.</p>
  
  <pre><code>var aboutPageComponent = {
      template: "&lt;div&gt;&lt;h1&gt;{{ whatPage }}&lt;/h1&gt;&lt;p&gt;{{ itsMe }}&lt;/p&gt;&lt;/div&gt;",
      data: function(){
          return{
              whatPage: "This is About Page"
  
          }
      },
      methods: {
  
      }
  }
  
  
  
  var vm = new Vue({
      el: "#app",
      data: {
          itsMe: "This is vm talking"
  
      },
      methods: {
  
      },
      components: {
          "app_about": aboutPageComponent
      }
  });
  
  var vm2 = new Vue({
      el: "#app2",
      data: {
          itsMe: "This is vm2 talking"
  
      },
      methods: {
  
      },
      components: {
          "app_about": aboutPageComponent
      }
  });
  </code></pre>